Вызывается из директивы, угловой рычание не отображается

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

источник

2013-12-23 sww176

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

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

Для решения с текущим внешним кодом события:

element.bind('click', function (e) { 
     scope.$apply(function(){ 
      growl.addErrorMessage('aaa');   
     }) 
});

источник

2013-12-23 05:23:40 charlietfl

Оценил, что именно первопричина. Но почему угловой не делает это автоматически в element.bind, вы думаете, что это возможно? – sww176

Приятно видеть, что ваша проблема решена! Но нет, угловые не могут сделать это автоматически в функции обратного вызова, которую вы определяете сами и которая вызывается браузером. Для этого было создано $ apply. Но гораздо лучшим решением здесь будет использование уже упомянутого ng-click. Удачи с угловатым рычанием! –

Причина, по которой я написал директиву «aaa» вместо ng-click = 'aaa(), заключается в том, что один из моих партнеров предоставляет мне html & css, он считает, что полезно использовать семантический HTML, написав директиву «do-login» , Я могу связать событие входа с кнопкой, он считает, что добавление «do-login» или «data-do-login» более приемлемо, ng-click = «doLogin()» кажется слишком программным (хотя оба они являются директивами). – sww176

Вызывается из директивы, угловой рычание не отображается

ответ

Смежные вопросы