菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
420
0

Ⅶ.AngularJS的点点滴滴-- 事件

原创
05/13 14:22
阅读数 51403

事件(和js一样有冒泡和捕获)


<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>

<div ng-controller="parent">parent:{{detail}}
<div ng-controller="test">
myself:{{detail}} 
<div ng-controller="child">child:{{detail}}</div>
<button ng-click="addparent()">addparent</button>
<button ng-click="addchild()">addchild</button>
</div>
</div>
<script>
var app = angular.module('app', [])
.controller('parent', ['$scope',function($scope) {
    $scope.detail =1;
    $scope.$on('add',function(){
      $scope.detail +=1;
    });

}]).controller('child', ['$scope',function($scope) {
    $scope.detail =1;
    $scope.$on('add',function(){
      $scope.detail +=1;
    });

}]).controller('test', ['$scope',function($scope) {
   $scope.detail =1;
   $scope.$on('add',function(){
      $scope.detail +=1;
   });
   $scope.addparent=function(){
    $scope.$emit('add');
   };   
   $scope.addchild=function(){
    $scope.$broadcast('add');
   };
}]);
angular.bootstrap(document, ['app']);
</script>
</html>

从上面的代码可以看出$on来订阅一个事件,$emit触发的事件会冒泡处理, $broadcast触发的事件会捕获, 系统还有很多自带的事件可以订阅,比如路由成功与否的$routeChangeError$routeChangeSuccess

ng-bind-html-unsafe(新版本中被移除,可以新建指令依赖ngSanitize)


<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular-sanitize.js"></script>
<div ng-controller="parent" ng-bind-html-unsafe="html"></div>
<script>
angular.module('app', ['ngSanitize']).config(['$compileProvider',
function($compileProvider) {
  $compileProvider.directive({
    ngBindHtmlUnsafe: function() {
      return function(scope, element, attr) {
        element.addClass('ng-binding').data('$binding', attr.ngBindHtmlUnsafe);
        scope.$watch(attr.ngBindHtmlUnsafe,
        function ngBindHtmlUnsafeWatchAction(value) {
          element.html(value || '');
        });
      }
    }
  });
}]).controller('parent', ['$scope',
function($scope) {
  $scope.html = "<span>aaa</span>";
}]);
angular.bootstrap(document, ['app']);
</script>
</html>

前面了解了指令的用法后,应该觉得很简单啦


发表评论

0/200
420 点赞
0 评论
收藏
为你推荐 换一批