$ xem biến dịch vụ hoặc $ phát sóng sự kiện với AngularJS

Question

Tôi đang sử dụng dịch vụ để chia sẻ dữ liệu giữa các trình điều khiển. Ứng dụng phải cập nhật DOM khi biến được sửa đổi. Tôi đã tìm thấy hai cách để làm điều đó, bạn sẽ nhìn thấy mã ở đây:

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(); 
    }; 
}]); 

Trong trường hợp đầu tiên, tôi chia sẻ một biến từ dịch vụ với bộ điều khiển và $ xem nó trong chỉ thị. Ở đây, tôi có thể sửa đổi biến trực tiếp trong bộ điều khiển này hoặc bất kỳ bộ điều khiển nào khác chia sẻ nó và DOM được cập nhật.

Trong tùy chọn khác, tôi sử dụng chức năng từ dịch vụ để sửa đổi biến $ phát sóng sự kiện. Sự kiện đó được lắng nghe bởi bộ điều khiển, sau đó DOM được cập nhật.

Tôi muốn biết tùy chọn nào tốt hơn và lý do cho điều đó.

Cảm ơn.

EDIT:

Các mã trong jsFiddle, là một phiên bản đơn giản hóa của mã thực trong đó có nhiều đối tượng và chức năng. Trong dịch vụ, trường giá trị của myVariable thực sự là một đối tượng có nhiều thông tin hơn chỉ là một kiểu nguyên thủy; thông tin đó phải được hiển thị và cập nhật trong DOM. Đối tượng myVariable.value được đặt theo mọi thay đổi:

myVariable.value = newValue; 

Khi điều đó xảy ra, tất cả các phần tử DOM phải được cập nhật. Vì thông tin chứa trong myVariable.value là biến, số lượng các thuộc tính thay đổi (tôi không thể sử dụng mảng), dễ dàng hơn để xóa các phần tử DOM và tạo các phần tử mới, đó là những gì tôi đang làm trong chỉ thị (nhưng với nhiều yếu tố trong mã thực):

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

Mã của bạn quá phức tạp. Tôi không chắc bạn đang cố gắng làm gì với chỉ thị đó.

Bạn không phải $watch cũng không $broadcast bất kỳ thứ gì.

Bạn có một đối tượng trong dịch vụ của mình có dịch vụ nguyên thủy. Trong ctrl1 bạn đang gán đối tượng cho $scope (Điều đó là tốt, bởi vì nếu chúng ta gán nó cho nguyên thủy, nó sẽ cần một $watch để chắc chắn như đã thấy here. Có một cách dễ dàng chỉ cần thực hiện myVal++ không cần biến tạm thời

Để được chỉ thị, tôi không chắc mục tiêu của bạn là gì, tôi đơn giản hóa những gì bạn cần để đưa ví dụ đó vào công việc. đến $watch cũng không phải $broadcast.ctrl1 nhận thức được những thay đổi được thực hiện đối với myVariable đối tượng để nếu thay đổi, bạn sẽ thấy nó.

Code:

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; 
}]); 

Xem:

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

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


</body> 

Dưới đây là fiddle chia hai của tôi: http://jsfiddle.net/uWdUJ/ Cùng ý tưởng một chút làm sạch.