Angular 指令双向绑定问题答案

【问题标题】：Angular Directive Two-Way Binding IssueAngular 指令双向绑定问题
【发布时间】：2014-10-17 17:38:33
【问题描述】：

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

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()。

知道这里发生了什么吗？

【问题讨论】：

嗯，我尝试复制问题，但对我来说看起来不错。 plnkr.co/edit/SyRPmIvxvnAw7CPBv2NJ?p=preview

标签： angularjs data-binding angularjs-directive

【解决方案1】：

这是因为myScopeVariable 包含 String 形式的值。
因此，如果您更改指令文本框中的值。它不会被反映。

在第二种方法中，您指的是 Object.因此，每当您更改 object 的值时，都会调用其相关的 watch 方法。并且值将被更新。

【讨论】：

【解决方案2】：

my-text-input是一个指令，所以他有自己的作用域，所以模型myScopeVariable不被父级监视。

试试这个：

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

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

【讨论】：