Вызванный из директивы, угловое рычание не показывать

Я использовал угловое рычание, которое очень хорошо для показа сообщения. ( https://github.com/marcorinck/angular-growl)

Это нормально, чтобы добавить сообщение в контроллер, но когда добавить сообщение в директиве, это не показывает, почему? Вот мой тестовый код.

a.html

<?xml version="1.0" encoding="UTF-8" ?>
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css"     href="https://raw.github.com/marcorinck/angular-growl/master/src/growl.css" />

<script type="text/javascript" src="../lib/angular/angular.js"></script>
<script type="text/javascript" src="../lib/angular-growl/angular-growl.js">    </script>
<script type="text/javascript" src="../lib/angular-route/angular-route.js">    </script>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<div ng-view=""></div>
<div growl="" class='growl-container'></div>
</body>
</html>

a.js

'use strict';

var module = angular.module('a', ['ngRoute', 'angular-growl']);
module.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
    controller: 'IndexCtrl',
    template: '<button aaa>aaaa</button>'
});
}]);

module.controller('IndexCtrl', ['growl', function (growl) {
growl.addErrorMessage('haha');
}]);

module.directive('aaa', ['growl', function (growl) {
return {
    restrict: 'A',
    scope: {},
    link: function (scope, element, attrs) {
        element.bind('click', function (e) {
            console.log('aaa');
            growl.addErrorMessage('aaa');
            growl.addErrorMessage('bbb');
        });
    }
};
}]);

var $html = angular.element(document);
$html.ready(function () {
angular.bootstrap($html, ['a']);
$html.addClass('ng-app');
});

1 ответ

Решение

Всякий раз, когда у вас есть события вне угла, которые изменяют угловые области, вам нужно использовать $apply сообщить угловому, что внесены изменения и запустить цикл дайджеста.

Если бы вы были использовать ng-click вместо этого вы не столкнетесь с этой проблемой.

Чтобы разрешить текущий код внешнего события:

element.bind('click', function (e) {
       scope.$apply(function(){
            growl.addErrorMessage('aaa');           
      })
});
Другие вопросы по тегам