$使用AngularJS觀察服務變量或$廣播事件

Question

我正在使用服務在控制器之間共享數據。 應用程序必須在修改變量時更新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();
    };
}]);

在第一種情況下，我與服務器共享一個變量，並在指令中查看$。 在這里，我可以直接在此控制器或共享它的任何其他控制器中修改變量，並更新DOM。

在另一個選項中，我使用服務中的函數來修改$廣播事件的變量。 該事件由控制器監聽，然后更新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>" );

        } );

Answer 1

你的代碼過於復雜。 我不確定你在用這個指令做什么。

你沒有$watch或$broadcast任何東西。

您的服務中有一個具有原語的對象。 在CTRL1你將對象分配到$scope （這是一個好，因為如果我們將其分配給原始的，它需要一個$watch肯定是看到這里。

到現在為止還挺好。 要增加該值，只需執行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>

這是我的分叉小提琴： http ： //jsfiddle.net/uWdUJ/同樣的想法有點清理。

$使用AngularJS觀察服務變量或$廣播事件

問題描述

1 個解決方案

解決方案1
1 2013-08-24 01:30:02

$使用AngularJS觀察服務變量或$廣播事件

問題描述

1 個解決方案

解決方案1 1 2013-08-24 01:30:02

解決方案1
1 2013-08-24 01:30:02