Question

我的AngularJS应用程序中有以下指令，服务和控制器。该指令和该控制器（以及在我的应用程序中使用相同服务的其他控制器）之间的服务是通用的。如控制器内部所示，我观察服务的变化，而在指令中我与服务通信以更新它。由于某些原因，我不知道该指令没有更新我的服务，所以有人可以告诉我这里我做错了什么吗？感谢

控制器：

 myapp.controller('ClientsCtrl', function ($scope, UserSvc) {
     $scope.showForm = UserSvc.frmOpened;
     $scope.$watch(function () {
         return UserSvc.frmOpened;
     }, function () {
         $scope.showForm = UserSvc.frmOpened;
         console.log('Changed...  ' + $scope.showForm);
     });
 });

服务

myapp.factory('UserSvc', function ($log, $q, $http) {
    return {
        frmOpened: false
    };
});

指令：

myapp.directive('myDirective', ['UserSvc', function (UserSvc) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            angular.element(element).on("click", function () {
                var parentElement = $(this).parent();
                if (parentElement.hasClass('sample')) UserSvc.frmOpened = true; //This code never update the service
            } else {
                UserSvc.frmOpened = false; //This code never update the service
            }
            return false;
            });
    }
};
}]);

Answer 1

.on()是一个jQuery方法（也包含在Angular的jqLite中）。附加事件处理程序中的代码位于Angular之外，因此您需要使用$ apply：

$ apply（）用于从外部执行角度表达式角度框架。（例如，来自浏览器DOM事件， setTimeout，XHR或第三方库）。因为我们正在呼唤我们需要执行适当范围生命周期的角度框架异常处理，执行手表。

例如：

element.on("click", function() {

  var parentElement = $(this).parent();

  scope.$apply(function() {
    if (parentElement.hasClass('sample')) {
      UserSvc.frmOpened = true;
    } else {
      UserSvc.frmOpened = false;
    }
  });

  return false;
});

演示：http://plnkr.co/edit/mCl0jFwzdKW9UgwPYSQ9?p=preview

此外，链接函数中的element已经是jqLite / jQuery包装元素，无需再次对其执行angular.element()。

Answer 2

看起来你有一些括号，它们不应该在你的指令中。围绕if语句的第一部分没有括号，但是在你的其他部分之前有一个右括号。我认为这搞砸了事情。

尝试将此作为您的链接功能，看看它是否有任何改变：

link: function (scope, element, attrs) {
            angular.element(element).on("click", function () {
                var parentElement = $(this).parent();
                if (parentElement.hasClass('sample')) {
                    UserSvc.frmOpened = true; //Surrounded this with brackets
                } else {
                    UserSvc.frmOpened = false;
                }
                return false;
            });
        }

AngularJS从自定义指令调用服务

2 个答案: