Javascript AngularJs属性指令双向绑定

我有一个像这样的角度应用程序

Javascript:

(function(angular, module){

    module.controller("TestController", function($scope){
        $scope.magicValue = 1;
    });

    module.directive("valueDisplay", function () {
        return {
            restrict: "A",
            template: '<span>Iso Val: </span>{{ value }}<br/><span>Iso Change: </span><input data-ng-model="value" />',
            replace: false,
            scope: { },
            link: function (scope, element, attrs) {
                var pValKey = attrs.valueDisplay;

                // Copy value from parent Scope.
                scope.value = scope.$parent[pValKey];

                scope.$parent.$watch(pValKey, function(newValue) {
                    if(angular.equals(newValue, scope.value)) {
                        // Values are the same take no action
                        return;
                    }
                    // Update Local Value
                    scope.value = newValue;
                });

                scope.$watch('value', function(newValue) {
                    if(angular.equals(newValue, scope.$parent[pValKey])) {
                        // Values are the same take no action
                        return;
                    }
                    // Update Parent Value
                    scope.$parent[pValKey] = newValue;
                });
            }
        };
    });

}(angular, angular.module("Test", [])));

（功能（角度、模块）{
模块控制器（“TestController”，函数（$scope）{
$scope.magicValue=1；
});
模块指令（“值显示”，函数（）{
返回{
限制：“A”，
模板：“Iso Val:{{value}}
Iso更改：'，
替换：false，
作用域：{}，
链接：函数（范围、元素、属性）{
var pValKey=attrs.valueDisplay；
//从父作用域复制值。
scope.value=scope.$parent[pValKey]；
作用域.$parent.$watch（pValKey，函数（newValue））{
if（角度等于（newValue，scope.value））{
//值相同，不采取任何行动
返回；
}
//更新本地值
scope.value=newValue；
});
范围$watch（'value'，函数（newValue）{
if（angular.equals（newValue，scope.$parent[pValKey]））{
//值相同，不采取任何行动
返回；
}
//更新父值
范围.$parent[pValKey]=newValue；
});
}
};
});
}（角度，角度。模块（“测试“，[]））；

HTML:

父值：{{magicValue}}

父项更改：

好的，这是可行的，但我想知道是否有更好的方法来完成我在这里设置的双向绑定

---

请记住，我需要隔离作用域&我知道我可以定义额外的属性，并使用“=”在父级和隔离作用域之间进行双向数据绑定。我希望这样做，但数据会传递到指令属性中，就像我在这里所做的那样。

使用隔离作用域可以更简洁地完成这项工作

这里是一个更新的

您可以使用

value:'=valueDisplay'

=

告诉您需要双向绑定：

module.directive("valueDisplay", function () {
    return {
      restrict: "A",
      template: '<span>Iso Val: </span>{{ value }}<br/><span>Iso Change: </span><input data-ng-model="value" />',
      replace: false,
      scope: { value: '=valueDisplay' },
      link: function (scope, element, attrs) {

      }
    };
  });

module.directive（“valueDisplay”，函数（）{
返回{
限制：“A”，
模板：“Iso Val:{{value}}
Iso更改：'，
替换：false，
作用域：{value:'=valueDisplay'}，
链接：函数（范围、元素、属性）{
}
};
});

您可以使用单独的作用域更简洁地执行此操作

这里是一个更新的

您可以使用

value:'=valueDisplay'

=

告诉您需要双向绑定：

module.directive("valueDisplay", function () {
    return {
      restrict: "A",
      template: '<span>Iso Val: </span>{{ value }}<br/><span>Iso Change: </span><input data-ng-model="value" />',
      replace: false,
      scope: { value: '=valueDisplay' },
      link: function (scope, element, attrs) {

      }
    };
  });

module.directive（“valueDisplay”，函数（）{
返回{
限制：“A”，
模板：“Iso Val:{{value}}
Iso更改：'，
替换：false，
作用域：{value:'=valueDisplay'}，
链接：函数（范围、元素、属性）{
}
};
});

您可以使用单独的作用域更简洁地执行此操作

这里是一个更新的

您可以使用

value:'=valueDisplay'

=

告诉您需要双向绑定：

module.directive("valueDisplay", function () {
    return {
      restrict: "A",
      template: '<span>Iso Val: </span>{{ value }}<br/><span>Iso Change: </span><input data-ng-model="value" />',
      replace: false,
      scope: { value: '=valueDisplay' },
      link: function (scope, element, attrs) {

      }
    };
  });

module.directive（“valueDisplay”，函数（）{
返回{
限制：“A”，
模板：“Iso Val:{{value}}
Iso更改：'，
替换：false，
作用域：{value:'=valueDisplay'}，
链接：函数（范围、元素、属性）{
}
};
});

您可以使用单独的作用域更简洁地执行此操作

这里是一个更新的

您可以使用

value:'=valueDisplay'

=

告诉您需要双向绑定：

module.directive("valueDisplay", function () {
    return {
      restrict: "A",
      template: '<span>Iso Val: </span>{{ value }}<br/><span>Iso Change: </span><input data-ng-model="value" />',
      replace: false,
      scope: { value: '=valueDisplay' },
      link: function (scope, element, attrs) {

      }
    };
  });

module.directive（“valueDisplay”，函数（）{
返回{
限制：“A”，
模板：“Iso Val:{{value}}
Iso更改：'，
替换：false，
作用域：{value:'=valueDisplay'}，
链接：函数（范围、元素、属性）{
}
};
});

是什么阻止您使用作用域：{valueDisplay:'=valueDisplay'}？您不必设置手表，该值仍在属性中。使用$parent也很脆弱，因为您永远无法确定该值是否在父级中实际设置。是什么阻止您使用作用域：{valueDisplay:'=valueDisplay'}？您不必设置手表，该值仍在属性中。使用$parent也很脆弱，因为您永远无法确定该值是否在父级中实际设置。是什么阻止您使用作用域：{valueDisplay:'=valueDisplay'}？您不必设置手表，该值仍在属性中。使用$parent也很脆弱，因为您永远无法确定该值是否在父级中实际设置。是什么阻止您使用作用域：{valueDisplay:'=valueDisplay'}？您不必设置手表，该值仍在属性中。使用$$也是易碎的，因为你永远不能确定这个值实际上是在父中设置的。在写同样的东西的时候，你把它钉死了。OP真的只是为你写了什么角。在写同样的东西的时候，你把它钉牢了。OP真的只是为你写了什么角。在写同样的东西的时候，你把它钉牢了。OP真的只是为你写了什么角。在写同样的东西的时候，你把它钉牢了。这篇文章实际上只是写了Angular为你做的事情。