使用两个指令进行双向绑定

Question

我的控制器有一个配置：

$scope.myConfig = {
   value: 0
};

模板包含两个指令：

<my-directive-one config="myConfig"></my-directive-one>
<my-directive-two config="myConfig"></my-directive-two>

我的指令一：

<md-button ng-click="increseValue();">Increase</md-button>
function myDirectiveOne() {
        return {
            templateUrl: 'directives/my-directive-one.html',
            scope: {
                myConfig: '='
            },
            link: function (scope) {
                scope.increseValue = function () {
                    scope.myConfig.value += 1;
                }
            }
        }
    }

当我在指令一中更改配置时，我想在具有以下模板的第二个指令中获取更新值：

<div>{{ myConfig.value }}</div>
function myDirectiveTwo() {
     return {
       templateUrl: 'directives/my-directive-two.html',
       scope: {
           myConfig: '='
       },
       link: function (scope) {
     }
   }
 }

myDirectiveTwo值仍然为 0，但在控制器中更改正常的问题

Answer 1

作用域声明中有问题，因为两个指令都应该是

scope: {
  myConfig: '=config'
}

并在第二个指令中添加观察程序，以便在引用更改时收到通知

//myDirectiveTwo
link: function (scope) {
  scope.$watch('myConfig', function(newVal){
     console.log('value has changed');
     //do something
  })     
}

Answer 2

你初始化了一个函数 increaseValue 但从未执行过它

Answer 3

您必须根据自己的要求使用$rootscope。在您的指令中一个：

scope.increseValue = function () {
scope.myConfig.value += 1;
$rootScope.$broadcast('configChanged', val);
}

在您的指令中二：

$rootScope.$on('configChanged', function(event, val) {
scope.myConfig = val;
});

顺便说一下，您需要注入$rootscope来执行此操作。