Angular - 对指令控制器范围的更改不会反映在视图中

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

原因是$scope.foo 的值是一个原语。

在指令控制器中，您只在控制器初始化时分配一次$scope.test。基元不像对象那样继承，所以在初始分配之后$scope.test 没有任何改变

如果您使用对象而不是传入...继承将生效并且您会看到更改...否则您需要观看$scope.theFoo并自己更新$scope.test

Answer 2

只有在链接控制器时确实设置了该值时，控制器中的代码才会初始化为该值。任何后续更改都不起作用。

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

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

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

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 中，您应该将值传递给测试 <d1 the-foo='foo' test='foo'></d1>

在上面的代码中你的控制器没有多大用处，即使没有这部分controller: 'd1Ctrl'，代码也能正常工作。 在这个例子中你不必使用$watch。