AngularJS的scope与事件机制_angularjs ng-if 依赖$scope中属性则其中元素无法用代码设置事件

作者：从前慢现在也慢 | 2024-03-12 06:51:50

踩

angularjs ng-if 依赖$scope中属性则其中元素无法用代码设置事件

一点睛

1 神奇的$scope

2 $scope的生命周期

3 事件机制

因为Scope的作用域范围不同，所以不同的Scope之间若有交互的话需要通过事件（Event）机制来完成

1 冒泡（Emit）冒泡事件负责从子Scope向上发送事件。

子Scope发送：

$scope.$emit('EVENT_NAME_EMIT','message');

父Scope接受：

$scope.$on('EVENT_NAME_EMIT',function(event,data)

{

......

})

2 广播事件（Broadcast）。广播负责从父Scope向下发送事件。

父Scope发送：

$scope.$broadcast('EVENT_NAME_BROAD','message');

子Scope接受：

$scope.$broadcast('EVENT_NAME_BROAD',function(event,data){

.....

})

二实战

1 演示代码


<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="Scope1.css" />
    </head>
    <body>
        <div ng-controller="EventController">
            Root scope
            <tt>MyEvent</tt> count: {{count}}
            <ul>
                <li ng-repeat="i in [1]" ng-controller="EventController">
                    <button ng-click="$emit('MyEvent')">
                        $emit('MyEvent')
                    </button>
                    <button ng-click="$broadcast('MyEvent')">
                        $broadcast('MyEvent')
                    </button>
                    <br>
                    Middle scope
                    <tt>MyEvent</tt> count: {{count}}
                    <ul>
                        <li ng-repeat="item in [1, 2]" ng-controller="EventController">
                            Leaf scope
                            <tt>MyEvent</tt> count: {{count}}
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="Scope2.js"></script>
</html>

2 编写控制器


function EventController($scope) {
    $scope.count = 0;
    $scope.$on('MyEvent', function() {
        $scope.count++;
    });
}

3 演示

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/222826

AngularJS的scope与事件机制_angularjs ng-if 依赖$scope中属性 则其中元素无法用代码设置事件

AngularJS的scope与事件机制_angularjs ng-if 依赖$scope中属性则其中元素无法用代码设置事件