Question

我的范围变量foo的更改正在html中更新。当该值在指令控制器范围内发生变化时，它不会在html中更新。

我需要做些什么才能让它更新？

我有一个简单的example：

app.js

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
  $scope.foo = 99;

  $scope.changeValue = function() {
    $scope.foo = $scope.foo + 1;
  }
});

app.directive('d1', function(){
  return {
    restrict: 'E',
    scope: {
      theFoo: '='
    },
    templateUrl: 'd1.html',
    controller: 'd1Ctrl',
  }
});

app.controller('d1Ctrl', function($scope) {
  $scope.test = $scope.theFoo;
});

d1.html

<div>
  <p>The value of foo is '{{theFoo}}'.</p>
  <p>The value of test is '{{test}}'.</p>
</div>

在index.html内部

<d1 the-foo='foo'>
</d1>

<button ng-click='changeValue()'>change value</button>

总而言之，{{theFoo}}正在更新，但{{test}}并非如此。为什么呢？

Answer 1

如果在控制器链接时确实设置了控制器中的代码，则控制器中的代码仅初始化为该值。任何后续更改都无效。

如果要绑定任何后续更改，则需要在控制器或链接函数中设置$ watch语句。

$scope.$watch( 'theFoo', function(val){ $scope.test = val; })

更新了plunker - http://plnkr.co/edit/eWoPutIJrwxZj9XJu6QG?p=preview

Answer 2

原因是$scope.foo值是原始值。

在指令控制器中，只有在控制器初始化时才指定$scope.test一次。基元没有对象的继承方式，因此在初始赋值之后没有任何内容可以更改$scope.test

如果您使用了对象来传入...继承将生效，您会看到更改...否则您需要观看$scope.theFoo并自行更新$scope.test < / p>

Answer 3

此处您已经隔离了该指令的范围，因此test对d1.html不可见，如果您需要更改test以及theFoo您必须首先通过

使指令可见

app.directive('d1', function(){
  return {
    restrict: 'E',
    scope: {
      theFoo: '=',
      test : '=' //getting test as well
    },
    templateUrl: 'd1.html',
    controller: 'd1Ctrl',
  }
});

并且在index.html中，您应该将值传递给test <d1 the-foo='foo' test='foo'></d1>

在上面的代码中，您的控制器没什么用处，即使没有此部分controller: 'd1Ctrl'，代码也能正常工作。使用此示例，您不必使用$watch。

角度 - 指令控制器范围的变化不会反映在视图中

3 个答案: