Вызванный из директивы, угловое рычание не показывать
Я использовал угловое рычание, которое очень хорошо для показа сообщения. ( 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');
})
});