0

私はこのような角のあるアプリを持っています

プランカー

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>

わかりましたので、これは機能しますが、ここでセットアップしたこの 2 方向バインディングを行うためのより良い方法がないかどうか疑問に思っていますか?

分離スコープが必要であり、追加の属性を定義し、「=」を使用して、親スコープと分離スコープの間で双方向のデータバインディングを行うことができることを知っていることに注意してください。そのようなものが欲しいのですが、データがに渡される場所私がここに持っているようなディレクティブ属性。

4

1 に答える 1

3

分離スコープを使用すると、これをより簡潔に行うことができます。

これが更新された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) {

      }
    };
  });
于 2013-10-28T09:54:49.453 に答える