javascript - 为什么在指令的链接函数中对 $scope 所做的更改没有反射(reflect)在 UI 上？

Question

AngularJS 指令的 link 功能更改隔离范围数据未反射(reflect)在 UI 中。

这是一个例子:

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

myApp.directive('myDirective', function () {
    return {
        restrict: 'A',
        template: '<span>Title: {{myParams.title}}</span>',
        scope: {
            myParams: '='
        },
        link: function ($scope) {
            // the new value is not reflected in ui
            $scope.myParams.title = 'this is myDirective';
        }
    };
});

HTML:

 <div my-directive my-params="{title: 'this is title'}"></div>

我希望 HTML 页面显示 this is myDirective 但实际上它是 this is title。

另外，你能解释一下为什么会这样显示吗？谢谢

Answer 1

原因是 my-params="{title: 'this is title'}" 是一个常量 表达式并且不可赋值。因此，即使您尝试覆盖 'title' 属性，它也会从常量中被覆盖回来。检查this fiddle .它包含您的代码并设置为与 Angular 1.4 一起使用。不同之处在于，该指令如上所述使用一次，并且一次使用来自 Controller 的可更改的非常量值:

<div ng-app="app" ng-controller="Ctrl as ctrl">
  <div my-directive my-params="{title: 'this is title'}"></div>
  <div my-directive my-params="data"></div>
</div>

第二个实例(非常量表达式)有效。

现在尝试将 Angular 版本更改为 1.2。请注意，现在 Angular 会抛出一个无限摘要错误:

VM1033 angular.js:9101 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: parentValueWatch; newVal: {\"title\":\"this is title\"}; oldVal: {\"title\":\"this is title\"}"],["fn: parentValueWatch; newVal: {\"title\":\"this is title\"}; oldVal: {\"title\":\"this is title\"}"],["fn: parentValueWatch; newVal: {\"title\":\"this is title\"}; oldVal: {\"title\":\"this is title\"}"],["fn: parentValueWatch; newVal: {\"title\":\"this is title\"}; oldVal: {\"title\":\"this is title\"}"],["fn: parentValueWatch; newVal: {\"title\":\"this is title\"}; oldVal: {\"title\":\"this is title\"}"]]

指令中给出的表达式(即 my-params="{title: 'this is title'}")试图覆盖指令范围属性(总是在 1.2 中创建一个新对象) ，因此是无限摘要)。