Question

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

使用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", [])));

HTML：

<!DOCTYPE html>
<html>

    <head>
        <script data-require="angular.js@*" data-semver="1.2.0-rc2" src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
    </head>

    <body ng-app="Test">
        <div ng-controller="TestController">
            <ol>
                <li>
                    <span>Parent Val: </span>{{ magicValue }}<br/>
                    <span>Parent Change:</span><input data-ng-model="magicValue" />
                </li>
                <li data-value-display="magicValue"></li>
            </ol>
        </div>
    </body>
</html>

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

请记住，我想要隔离范围＆amp;我知道我可以定义额外的属性并使用'='在父级和隔离范围之间进行双向数据绑定我喜欢这样的东西，但数据传递给指令属性，就像我在这里一样。

Answer 1

您可以使用隔离范围更加简洁地完成此任务。

以下是更新的plunker。

您可以使用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) {

      }
    };
  });

AngularJs属性指令2路绑定

1 个答案: