角度只读作用域行为很奇怪

Question

Im following this book on directives and decided to try their code on read-only scopes. However, im getting weird results.

What should happen is:

1. At the beginning the #appTitle should read "Hello World" and the #newDirTitle should read "Directive of Hello World" (it doesnt)
2. After user clicks on #newAppTitle , #appTitle would change to App 2.0 and #newDirTitle should read "Directive of App 2.0" (it doesnt)
3. When #newDirTitle is clicked, only the directive's title must change (it doesnt)

I've also noticed that fiddling angular version down to 1.1.1 solves the issue. While I do accept that some minor version changes might affect the overall behavior, i dont understand why, for instance, case 3 stopped working or why in case 1 the title still reads the original app title ("Hello World") value instead of scoped title read-only value ("Directive of Hello World"). Could anyone please explain?

Below is the code:

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

The book may be out-dated (perhaps based on an early version of Angular).

There are two things wrong:

1. The 'setDirectiveTitle' in the isolated scope of myScopeDirective is not accessible from the 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') is bound to AppController's scope not the directive's isolated scope. In AppController's scope, the method doesn't exist. And since isolated scopes are "isolated" and do not inherit scope from the parent (AppController's scope), the button click doesn't actually do anything.

2 . The contents under the directive are bound to AppController's scope - not the isolated scope. So the 'title' model is actually the same model as the 'appTitle' above it. The reason why both title's say 'Hello World' is because both are bound to the same model 'title' on AppController's scope. This is also the reason why both title's change to the same title at the same time when the first button is clicked.

I think the main mistake that the author makes is the incorrect assumption that the contents under myScopedDirective are bound to the isolated scope. This may have been true for earlier versions of Angluar, but it is certainly not true for Angular 1.2 and above. The contents are bound to the parent scope (AppController's scope).

Answer 2

Working with scopes in Angular can be quite confusing at times. What's also important to remember is that the "Link"-function is not the same as a controller, and that's why Directives can be created using a controller. If you require custom functionality in your directive, you can either bind stuff using JQLite (not recommended), or create a controller for your directive. This does require that you also use a template for the HTML that your directive needs (and this can be inlined with template, or extracted to html with templateUrl). Here's an updated example of your directive (more explanation after the code)

demoApp.directive("myScopedDirective", function() {
    return {
        template: '<h4 id="directiveTitle">Directive of {{ directiveTitle }}</h4><button id="newDirTitle" ng-click="setDirectiveTitle(\'bob\')">Bob it!</button>',
        scope: {
            title: '=msdTitle',
            directiveTitle: '@msdTitle'
        },
        controller: function($scope){
            $scope.setDirectiveTitle = function(t) {
                $scope.directiveTitle = t;
            };
        },
        link: function(scope, element, attrs) {
            scope.$watch('title', function(){
                 scope.directiveTitle = scope.title;
            });
        }
    };
});

Since your requirement was that when the title changes on the parent controller scope the directive title should change aswell, we essentially need to make a copy of the title, but as you see, I use the @ for the directiveTitle and = for the title. The @ will take the initial value of the title, but wont watch the property for changes, whereas the = will change whenever its assigned property changes, in this case the AppController.title .

In our Link-function we now set a $watch on the original title, to make sure we can stay up to date when the AppController.title changes.

The setDirectiveTitle is now a function on the scope injected into the directives controller, and changes the directiveTitle property which again is bound in our template.

Not sure if this is exactly what you wanted, but it seems to fit your requirements. :)

Updated fiddle:

http://jsfiddle.net/uH76g/