将服务变量绑定到指令？

我有一个控制器，其中包含一个从服务器获取一些数据的函数。我将这些数据存储在一个服务变量中。这个服务然后被注入一个指令。我希望指令自动更新，只要这个函数被调用并且数据被更新。将服务变量绑定到指令？

我的控制器：

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

的指令：

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

模板：

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

一个按钮被按下时，更新函数被调用，它更新myvalue的到新的价值。我希望它自动反映在指令中。

普拉克：http://plnkr.co/edit/OUPzT4MFS32OenRIO9q4?p=preview

来源

2014-11-05 Rutwick Gangurde

请参见下面的工作演示

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>

来源

2014-11-05 13:15:44 sylwester

谢谢！我跟着这个，我可以访问链接功能中的数据。但令人惊讶的是，我在指令中看不到它！ – 2014-11-05 13:30:32

@RutwickGangurde你能告诉我究竟在哪里？ – sylwester 2014-11-05 13:31:54

那还有一件事......我没有明确地将控制器分配给指令。我在指令中使用的数据是一个对象。我可以在链接功能中看到它。但是当我在指令模板中使用它时，它不可见。 – 2014-11-05 14:36:54

您可以通过添加服务指令本身的参考尝试..

的指令：

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

模板：

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

E dit：我经历过你的闯入者，终于找到了工作。

您可以检查更新的代码here

来源

2014-11-05 11:53:42

这就是我也会做的。没有额外的观察者，只是原生的JS对象引用。 – dfsq 2014-11-05 11:54:26

试过这个，不行！ – 2014-11-05 11:56:18

你可以为同一个@RutwickGangurde发布一个plunker吗？ – 2014-11-05 11:57:20

@RutwickGangurde和其他人谁是有问题的，如果你想设置一个范围变量，它不是一个对象，它不会工作。我猜这就是你正在做你的服务是什么：

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

，然后试图将其设置在指示/控制器：

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

不会用于获取更新的变量工作在服务发生变化时。

试试这不是您的服务：

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

，并在你的指令/控制器：

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

，并在你的HTML：

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

我会作出这样的一个评论，但我没有足够的特权，因此决定以一个非常简短的例子作为回应发布。

来源

2017-05-22 17:28:44

将服务变量绑定到指令？

回答

相关问题