gpt4 book ai didi

angularjs - AngularJS 中的 .$on() 是什么

转载 作者:行者123 更新时间:2023-12-03 05:49:30 26 4
gpt4 key购买 nike

我在教程中得到了这段代码 $rootScope.$on('abc',function(event, next, current){ });

我的问题是.$on()是什么?如果是函数,那为什么前面要加$

最佳答案

$on$broadcast$emit 相关 - 这是从其他地方触发代码的一种方式。

关于 $on 你应该知道的第一件事是它是 $scope 的一个方法

您应该知道的第二件事是 $ 前缀指的是 Angular 方法,$$ 前缀指的是您应该避免使用的 Angular 方法。

现在让我们详细了解 $on 是什么。

下面是一个示例模板及其 Controller ,我们将探讨 $broadcast/$on 如何帮助我们实现我们想要的目标。

<div ng-controller="FirstCtrl">
<input ng-model="name"/>
<button ng-click="register()">Register </button>
</div>

<div ng-controller="SecondCtrl">
Registered Name: <input ng-model="name"/>
</div>

Controller 是

app.controller('FirstCtrl', function($scope){
$scope.register = function(){

}
});

app.controller('SecondCtrl', function($scope){

});

我的问题是,当用户单击“注册”时,如何将名称传递给第二个 Controller ?您可能会想出多种解决方案,但我们要使用的解决方案是使用 $broadcast 和 $on。

$broadcast 与 $emit

我们应该使用哪个? $broadcast 将向下引导至所有子 dom 元素,而 $emit 将向相反方向引导至所有祖先 dom 元素。

避免在 $emit 或 $broadcast 之间做出决定的最佳方法是从 $rootScope 进行 channel 并使用 $broadcast 到其所有子级。这使得我们的情况变得更容易,因为我们的 dom 元素是兄弟元素。

添加 $rootScope 并让 $broadcast

app.controller('FirstCtrl', function($rootScope, $scope){
$scope.register = function(){
$rootScope.$broadcast('BOOM!', $scope.name)
}
});

请注意,我们添加了 $rootScope,现在我们正在使用 $broadcast(broadcastName,arguments)。对于broadcastName,我们想给它一个唯一的名称,这样我们就可以在第二个Ctrl 中捕获该名称。我选择了BOOM!只是为了好玩。第二个参数“arguments”允许我们将值传递给监听器。

接收我们的广播

在我们的第二个 Controller 中,我们需要设置代码来收听广播

app.controller('SecondCtrl', function($scope){
$scope.$on('BOOM!', function(events, args){
console.log(args);
$scope.name = args; //now we've registered!
})
});

其实就是这么简单。 Live Example

实现类似结果的其他方法

尽量避免使用这套方法,因为它既不高效也不易于维护,但它是解决您可能遇到的问题的简单方法。

您通常可以通过使用服务或简化 Controller 来完成同样的事情。我们不会详细讨论这一点,但我想我只是为了完整性而提及它。

最后,请记住,一个真正有用的广播是“$destroy”,您可以看到 $ 意味着它是由供应商代码创建的方法或对象。无论如何,当 Controller 被销毁时 $destroy 会被广播,您可能想听听这个以了解您的 Controller 何时被删除。

关于angularjs - AngularJS 中的 .$on() 是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28800426/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com