AngularJS вызывая обслуживание от настраиваемой директивы

Question

У меня есть следующая директива, сервис и контроллер внутри моего приложения AngularJS. Эта услуга распространена между директивой и этим контроллером (а также другими контроллерами, использующими одну и ту же услугу в моем приложении). Как показано внутри контроллера, я смотрю сервис для изменений, а в директиве я общаюсь с сервисом для его обновления. По какой-то причине, я не знаю, директива не обновляет мою услугу, так может кто-то, пожалуйста, скажите мне, что я делаю неправильно здесь? Благодаря

1. Контроллер:

   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); 
       }); 
   }); 
   

2. Сервис

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

3. Директива:

   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 (также входит в jqLite угловых в). Код внутри прикрепленного обработчика событий живет вне Угловое, так что вам нужно использовать $ применять:

$ применяются() используется для выполнения выражения в угловой из-за пределов угловой рамочным. (Например, из событий браузера 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; 
      }); 
     }