指令中的AngularJS指令未设置范围值

Question

我有一个控制器，值$scope.colorHex

例如，我有指令colorpickerTooltip，在模板中我调用另一个指令：<colorpicker ng-model="colorHex"></colorpicker>

然后在第二个指令（colorpicker）中设置控制器的值：

scope.colorHex = '#cecece';

然后在第二个指令中我调用方法scope.doIt()，但是出了点问题：

我的$scope值未更新！但为什么，也许是因为我的2级指令？

如何设置控制器变量值？

Answer 1

是的，这是两级指令范围的问题。请阅读https://github.com/angular/angular.js/wiki/Understanding-Scopes

将控制器中的colorHex定义为对象，如：

$scope.dataStore = {};
$scope.dataStore.colorHex = '#cecece';

然后在第一个指令处修改为：

<colorpicker ng-model="dataStore.colorHex"></colorpicker>

然后在第二个指令中使用它来更新doIt方法：

$scope.doIt = function() {
    $scope.dataStore.colorHex = '#fff';
}

Answer 2

第二个指令从第一个指令复制值，并在第二个范围内创建一个新对象。 您可以通过使用诸如

之类的客观结构来阻止它

$scope.color= {hex=undefined};

并在内部范围内更改

$scopescope.color.hex = '#cecece';

它会阻止这种情况