javascript - $watch 不适用于 angularjs 中的指令属性

Question

不确定发生了什么，但由于某种原因，当我在输入字段中输入内容时，$watch 不会触发handleChange 函数。

HTML:

<div data-suggestion-search data-search="search_string">
    <input data-ng-model="search_string"/>
</div>

JS:

var suggestionSearch = function ($parse){
return {
    restrict: "A",
    transclude: true,
    scope: {
        search: '=search'
    },
    templateUrl: 'views/search.html',
    link:function(scope, lElement, attrs){
        scope.$watch("search", handleChange, true);
        function handleChange(data){
            console.log("search", scope.search);
        }
    }
}

}

模板:

<div class="findus-search-container" ng-transclude>

</div>

Answer 1

我不太熟悉嵌入如何处理范围，但我相信它为指令创建了一个新的范围，并为嵌入的内容创建了一个单独的范围，因此通过将相同的值绑定(bind)到两个嵌入元素和嵌入内容。

这是一个工作 plnkr它使一个单独的作用域变量与名为 search_string_binder 的 search_string 保持同步，您可以使用它来绑定(bind)到您的指令

虽然这可能不是最 Eloquent 解决方案，但它应该可以帮助您克服阻碍您的问题，直到拥有更多嵌入知识的人可以看看这个。