个人中心
gpt4 book ai didi

angularjs - 使用 AngularJS $watch 一个服务变量或 $broadcast 一个事件

转载 作者：行者123 更新时间：2023-12-04 15:58:53 25 4
gpt4 key购买 nike

我正在使用服务在 Controller 之间共享数据。当变量被修改时，应用程序必须更新 DOM。我找到了两种方法来做到这一点，你可以在这里看到代码:

http://jsfiddle.net/sosegon/9x4N3/7/

myApp.controller( "ctrl1", [ "$scope", "myService", function( $scope, myService ){
    $scope.init = function(){
        $scope.myVariable = myService.myVariable;
    };
}]);
myApp.controller( "ctrl2", [ "$scope", "myService", function( $scope, myService ){
    $scope.increaseVal = function(){
        var a = myService.myVariable.value;
        myService.myVariable.value = a + 1;
    };
}]);

http://jsfiddle.net/sosegon/Y93Wn/3/ 
myApp.controller( "ctrl1", [ "$scope", "myService", function( $scope, myService ){
    $scope.init = function(){
        $scope.increasedCounter = 1;
        $scope.myVariable = myService.myVariable;
    };
    $scope.$on( "increased", function(){
        $scope.increasedCounter += 1;
    }
}]);
myApp.controller( "ctrl2", [ "$scope", "myService", function( $scope, myService ){
    $scope.increaseVal = function(){
        myService.increaseVal();
    };
}]);

在第一种情况下，我与 Controller 共享来自服务的变量，并在指令中 $watch 它。在这里，我可以直接在这个 Controller 或任何其他共享它的 Controller 中修改变量，并更新 DOM。

在另一个选项中，我使用服务中的函数来修改 $broadcast 事件的变量。该事件由 Controller 监听，然后更新 DOM。

我想知道哪个选项更好以及原因。

谢谢。

编辑:

jsFiddle中的代码，是真实代码的简化版，拥有更多的对象和功能。在服务中，myVariable 的 value 字段实际上是一个对象，其信息量远不止一个原始类型；该信息必须在 DOM 中显示和更新。每次更改时都会设置对象 myVariable.value: 
myVariable.value = newValue;

发生这种情况时，所有 DOM 元素都必须更新。由于 myVariable.value 中包含的信息是可变的，属性的数量会发生变化(我不能使用数组)，因此删除 DOM 元素并创建新元素要容易得多，这就是我在指令中所做的(但是实际代码中有更多元素): 
scope.$watch( "myVariable.value", function( newVal, oldVal ){

            if( newVal === oldVal ){

                return;

            }

            while( element[0].children.length > 0 ){

                element[0].removeChild( element[0].firstChild );

            }


            var e = angular.element( element );
            e.append( "<span>Value is: " + scope.myVariable.value + "</span>" );

        } );

最佳答案

您的代码过于复杂。我不确定你想用那个指令做什么。

你不必$watch也不是 $broadcast任何事物。

您的服务中有一个具有原语的对象。在 ctrl1 中，您将对象分配给 $scope (这很好，因为如果我们将它分配给原语，它肯定需要一个 $watch，如 here 所示。

到现在为止还挺好。要增加值(value)，有一个简单的方法就是做 myVal++不需要临时变量。

对于指令，我不确定您在这里的目标是什么，我将其简化为您需要使该示例发挥作用的内容。你不需要$watch也不是 $broadcast . ctrl1了解对 myVariable 所做的更改对象，因此如果它发生变化，您会注意到它。

代码:

var myApp = angular.module( "myApp", [] );

myApp.provider( "myService", function(){

    var myVariable = {
        value: 0
    };
    this.$get = function(){
        return {
            myVariable: myVariable,
            increase: function() {
                myVariable.value++;
            }
        };
    };
});

myApp.directive( "dir1", function(){
    return {
        restrict: 'EA',
        template: '<div>value: {{myVariable.value}}</div>',
        replace: true
    };
});


myApp.controller("ctrl1", ["$scope", "myService", function($scope, myService){
    $scope.myVariable = myService.myVariable;
}]);

myApp.controller( "ctrl2", [ "$scope", "myService", function( $scope, myService ){
    $scope.increaseVal = myService.increase;
}]);

看法: 
<body ng-app = "myApp">
    <div dir1="myVariable.value" ng-controller = "ctrl1">
    </div>

    <div ng-controller = "ctrl2">
        <button ng-click = "increaseVal()">
            Increase
        </button>
    </div>


</body>

这是我的 fork fiddle : http://jsfiddle.net/uWdUJ/同样的想法有点清理。

关于angularjs - 使用 AngularJS $watch 一个服务变量或 $broadcast 一个事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18413670/

25 4 0
文章推荐： google-mirror-api - 接收时间线卡有很多延迟
文章推荐： c#-4.0 - GCHandle、AppDomains 托管代码和第 3 方 dll
文章推荐： api - 我可以看到一个 Trello 用户通过 API 从 "ghost"转换为 "normal"吗？
文章推荐： oracle - 如果在我的应用程序运行时更换 oracle 触发器，我会错过任何更改吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com