Bir hizmet değişkenini bir direktifle ilişkilendirin mi?

Question

Sunucudan bazı veriler alan bir işlev içeren bir denetleyicim var. Bu verileri bir hizmet değişkeninde saklıyorum. Bu hizmet daha sonra bir direktif içine enjekte edilir. Direktifin otomatik olarak güncellenmesini istiyorum, bu işlev çağrıldığında ve veriler yenilendiğinde.

Benim denetleyicisi:

angular 
.module('myApp') 
.controller('myCtrl', ['$scope', 'SomeService', function($scope, SomeService) { 
    $scope.update = function() { 
     SomeService.myValue = 100; 
    } 
}]); 

direktif:

angular.module('myApp') 
.directive('myDirective', ['SomeService', function(SomeService) { 
    return { 
     templateUrl : 'views/myDirective.html', 
     restrict : 'E', 
     scope : false, 
     controller : function($scope) { 
      this.myValue = SomeService.myValue; 
     } 
    }; 
}]); 

şablonu:

<div> 
    {{ myValue }} 
</div> 

güncelleme işlevi, bir düğme tıklandığında denir ve bir karşı MyValue günceller edilir yeni değer. Direktife otomatik olarak yansıtılmasını istiyorum.

Düşmek: http://plnkr.co/edit/OUPzT4MFS32OenRIO9q4?p=preview

Answer 1

kontrol edebilirsiniz

var app = angular.module('app', []); 
 

 
app.controller('MainCtrl', function($scope, SomeService) { 
 
    $scope.name = SomeService.data; 
 

 
    $scope.update = function() { 
 

 
    $scope.name.myValue += 1; 
 
    } 
 

 
}); 
 

 
app.factory('SomeService', function() { 
 
    var data = { 
 

 
    myValue: 0 
 

 
    }; 
 

 
    return { 
 

 
    data: data 
 

 
    } 
 
}); 
 

 

 
app.directive('myDirective', ['SomeService', 
 
    function(SomeService) { 
 
    return { 
 
     templateUrl: 'myDirective.html', 
 
     restrict: 'EA', 
 
     scope: false, 
 
     link: function(scope, elem, attr) { 
 

 
     scope.data = SomeService.data 
 

 
     } 
 
    }; 
 
    } 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="MainCtrl"> 
 
    <p>My Value: {{name.myValue}}</p> 
 
    <button ng-click="update()">Click</button> 
 
    <hr/> 
 
    <div my-directive></div> 
 

 
    <script type="text/ng-template" id="myDirective.html"> 
 
     <h3>My Directive</h3> 
 
     <p>Value: {{data.myValue}}</p> 
 
    </script> 
 
    </div> 
 
</div>

Answer 2

Sen direktifi kendisine hizmet referansı ekleyerek deneyebilirsiniz

..

direktif:

angular.module('myApp') 
.directive('myDirective', ['SomeService', function(SomeService) { 
    return { 
     templateUrl : 'views/myDirective.html', 
     restrict : 'E', 
     scope : false, 
     controller : function($scope) { 
      this.SomeService = SomeService; 
     } 
    }; 
}]); 

şablonu:

<div> 
    {{ SomeService.myValue }} 
</div> 

E dit: Senin plunker'ından geçtim ve sonunda işe koyuldum.

Aşağıdaki çalışma demo bakınız güncellenmiş kodu here

Answer 3

@RutwickGangurde ve çalışıyorsanız, sorunları yapıyorduk diğerleri Çalışmayan bir nesne olmayan bir kapsam değişkeni ayarlamak. yönerge/denetleyici bunu ayarlamaya çalışırken sonra

... 
this.myVar = true; 
... 

ve: Ben şu anda serviste ne yaptığınızı tahmin ediyorum güncellenen değişken almak için ÇALIŞMAYACAKTIR

... 
scope.myVar = myService.myVar; 
... 

değiştiğinde hizmette.

yerine hizmetinde bu deneyin:

... 
scope.myValue = myService.myObj; 
... 

ve html:

... 
this.myObj = {}; 
this.myObj.myVar = true; 
... 

ve direktifi/denetleyici içinde

... 
{{ myValue.myVar }} 
... 

Ben bu yapmış olur Bir yorum, ancak henüz yeterli ayrıcalıklara sahip değilim, bu yüzden çok kısa bir örnekle yanıt olarak göndermeye karar verdim.