Question

我试图在指令链接函数中调用父作用域中的函数来更新父作用域属性之一。

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

app.controller('MyCtrl', function($scope) {
    var users = [{
        name: 'Andy',
        age: 9
    },{
        name: 'Tom',
        age: 10
    },{
        name: 'Jerry',
        age: 11
    },{
        name: 'Harry',
        age: 12
    }];

    $scope.users = users;
    $scope.currentUser = users[0];
    $scope.updateCurrentUser = function(index) {
        $scope.currentUser = users[index];
    };
});

app.directive('myDirective', function() {
    return {
        template: '<div><button ng-repeat="user in users">{{ user.name }}</button></div>',
        restrict: 'EA',
        link: function(scope, element, attrs) {
            element.on('click', 'button', function() {
                scope.updateCurrentUser($(this).index());
            });
        }
    };
});

source code

假设我单击任何按钮，currentUser应显示更新相应的用户数据。但是，看起来它不起作用。我想知道为什么以及如何解决这个问题？

Answer 1

您不需要使用jQuery事件，只需使用ngClick指令，您的代码就会更清晰，并且对于友好的角色：

更改您的指令，使其像这样：

app.directive('myDirective', function() {
  return {
    template: '<div><button ng-click="updateCurrentUser($index)" ng-repeat="user in users">{{ user.name }}</button></div>',
    restrict: 'EA'
  };
});

Working example

Answer 2

由于在没有Angular知识的情况下处理click事件，您需要$apply您的更改：

element.on('click', 'button', function() {   
    scope.updateCurrentUser($(this).index());
    scope.$apply();
});

$apply运行和Angular $digest。 $digest将负责父母的双向绑定。

在指令内调用父作用域中的函数不会更新父作用域

2 个答案:

Working example