Question

我是Angular的新手，我遇到了一个小问题。这是交易：

已经声明了一个名为“myMod”的模块我正在以这种方式定义一个指令：

myMod.directive("myDirective", function () {
    dir = {
        restrict:'A',
        template: '<h3>{{myController.name}}</h3> <span class="button">Click to change name</span>',
        link: function(scope, element, attrs, ctrl) {
            $(element).find('.button').click(function(){
                scope.changeName('John'); // I found this way to call my controller's function 
            });
        },
        controller: ['$scope', function($scope){
            this.name = 'Michael';
            var self = this;

            $scope.changeName = function(newName){
                self.name = newName;
            };
        }],
        controllerAs: 'myController'
    };
    return dir;
})

我正在我的html上应用这个指令，简单如下：

<div my-directive></div>

所以，即使我按下按钮，最初我得到正确的视图（它正确地呈现了名称“Michael”），即使控制器的属性“name”的值更改为“John”页面上的名称仍然是“迈克尔”。我做错了什么？

提前致谢

Answer 1

编辑我的答案，展示一个工作小提琴。以下是使用范围的链接功能和控制器功能的示例。

directive("myDirective", function () {
    dir = {
        restrict: 'A',
        template: '<h3>{{myController.name}}</h3> <span class="button" ng-click="callController()">Click to change name</span>',
        link: function (scope, element, attrs, ctrl) {

            scope.callController = function () {
                scope.changeName('John');
            }
        },
        controller: ['$scope', function ($scope) {
            this.name = 'Michael';
            var self = this;

            $scope.changeName = function (newName) {
                self.name = newName;
            };
        }],
        controllerAs: 'myController'
    };
    return dir;
}

小提琴：

http://jsfiddle.net/nr5c9v1e/1/

更改控制器的属性不会影响视图

1 个答案: