Question

我的控制器有一个配置：

$scope.myConfig = {
   value: 0
};

模板包含两个指令：

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

MY-指令酮：

<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;
                }
            }
        }
    }

当我在指令1中更改config时，我希望在第二个指令中获得更新值，该指令具有如下模板：

<div>{{ myConfig.value }}</div>

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

问题是myDirectiveTwo值仍为0，但在控制器中更改

Answer 1

您初始化函数increaseValue但从未执行过它

Answer 2

范围声明中有问题，因为两个指令都应该是

{
   "data": [
   ]
}

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

scope: {
  myConfig: '=config'
}

Answer 3

您必须根据您的要求使用$rootscope。在你的指令中：

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

在你的指令中：

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

你需要注入$rootscope来执行此操作。

双向绑定与两个指令

3 个答案: