javascript - Angular 只读范围行为很奇怪

Question

我正在关注这本关于指令的书，并决定在只读范围上尝试他们的代码。然而，我得到了奇怪的结果。

应该发生的是:

1. 开头时，#appTitle 应为“Hello World”，#newDirTitle 应为“Directive of Hello World”(事实并非如此)
2. 用户点击 #newAppTitle 后，#appTitle 将更改为 App 2.0，并且 #newDirTitle 应显示“Directive of App 2.0”(事实并非如此)
3. 当点击#newDirTitle时，只有指令的标题必须更改(实际上不会)

我还注意到将 Angular 版本调低至 1.1.1 可以解决该问题。虽然我确实接受一些较小的版本更改可能会影响整体行为，但我不明白为什么，例如，情况 3 停止工作，或者为什么在情况 1 中标题仍然读取原始应用程序标题(“Hello World”)值而不是作用域title 只读值(“Hello World 指令”)。谁能解释一下吗？

下面是代码:

HTML

<div ng-app="demoApp">
    <div ng-controller="AppController">
        <div ng-init="title = 'Hello World'">
            <h2 id="appTitle">{{ title }}</h2>
            <button id="newAppTitle" ng-click="setAppTitle('App 2.0')">Upgrade Me!</button>
            <div my-scoped-directive="" msd-title="Directive of {{ title }}">
                <h4 id="directiveTitle">{{ title }}</h4>
                <button id="newDirTitle" ng-click="setDirectiveTitle('bob')">Bob it!</button>
            </div>
        </div>
    </div>
</div>

JS

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

demoApp.controller("AppController", function($scope) {
    $scope.setAppTitle = function(t) {
        $scope.title = t;
    };
});

demoApp.directive("myScopedDirective", function() {
    return {
        scope: {
            title: '@msdTitle'
        },
        link: function(scope, element, attrs) {
            scope.setDirectiveTitle = function(t) {
                scope.title = t;
            };
        }
    };
});

JSFIDDLE

Click here to view

Answer 1

这本书可能已经过时了(可能基于 Angular 的早期版本)。

有两处错误:

1. myScopeDirective 独立作用域中的“setDirectiveTitle”无法从 HTML 访问:

    <div my-scoped-directive="" msd-title="Directive of {{ title }}">
       <!--*** THE CONTENTS BELOW THE DIRECTIVE ARE BOUND TO AppController's SCOPE ***-->
        <h4 id="directiveTitle">{{ title }}</h4>
        <button id="newDirTitle" ng-click="setDirectiveTitle('bob')">Bob it!</button>
    </div>

setDirectiveTitle('bob') 绑定(bind)到 AppController 的范围，而不是指令的独立范围。在 AppController 的范围内，该方法不存在。由于隔离作用域是“隔离的”，并且不会从父级(AppController 的作用域)继承作用域，因此单击按钮实际上不会执行任何操作。

2。该指令下的内容绑定(bind)到 AppController 的范围 - 而不是隔离的范围。所以“title”模型实际上与其上面的“appTitle”模型相同。两个标题都显示“Hello World”的原因是它们都绑定(bind)到 AppController 作用域上的同一模型“标题”。这也是为什么当单击第一个按钮时两个标题同时更改为相同标题的原因。

我认为作者犯的主要错误是错误地假设 myScopedDirective 下的内容绑定(bind)到隔离范围。对于 Angular 的早期版本来说可能是这样，但对于 Angular 1.2 及更高版本来说肯定不是这样。内容绑定(bind)到父作用域(AppController 的作用域)。