Question

我正在为一些附加功能创建自定义输入指令。

app.directive('myTextInput', [
    function () {
        var directive = {};
        directive.restrict = 'A';
        directive.scope = {
            textModel: '='
        };
        directive.link = function ($scope, element, attrs) {
            // FUnctionality
        };
        directive.template = '<input ng-model="textModel" type="text">';
    return directive;
}]);

并使用隔离的范围属性textModel进行双向绑定。父范围HTML是：

<div my-text-input text-model="myScopeVariable"></div>
<span>TYPED : {{myScopeVariable}}</span>

控制器范围已定义变量$scope.myScopeVariable="";。

当我这样做的时候。在指令输入中键入的内容能够在<span>标记中打印。这告诉它正在更新。

问题是。

父范围内的

。我有一个方法，将按下按钮执行。

$scope.doSomething = function(){
    console.log($scope.myScopeVariable);
};

单击按钮。日志是空的。这应该是在指令输入中输入的内容。

这是奇怪的

现在，如果将范围变量定义为

$scope.myScopeVariable = {key:''};

并在HTML中使用

<div my-text-input text-model="myScopeVariable.key"></div>
<span>TYPED : {{myScopeVariable.key}}</span>

然后它在每个地方工作。即使在之前说过的函数doSomething()。

知道这里发生了什么吗？

Answer 1

这是因为myScopeVariable包含的值为字符串。
因此，如果您更改指令的文本框的值。它不会被反映出来。

在第二种方法中，您指的是Object。因此，每当您更改对象的值时，都会调用其相关的监视方法。价值将会更新。

Answer 2

my-text-input是一个指令，所以他有自己的范围，所以模型myScopeVariable不会被父母监视。

试试这个：

<div my-text-input text-model="$parent.myScopeVariable"></div> <span>TYPED : {{myScopeVariable}}</span>

这不是最佳做法，但它可能有效。

角度指令双向绑定问题

2 个答案: