Question

我正在使用角度咆哮，这非常适合显示信息。（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');
});

Answer 1

每当你有超出角度范围的事件改变角度范围时，你需要使用$apply来告知角度变化并运行一个摘要周期。

如果您使用ng-click，则不会遇到此问题。

使用当前外部事件代码解决：

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

从指令调用，角度咆哮不显示

1 个答案: