Question

我有一个控制器，它包含一个从服务器获取一些数据的函数。我将该数据存储在服务变量中。然后将此服务注入指令中。我想要在调用此函数并更新数据时自动更新指令。

我的控制器：

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

Answer 1

请参阅下面的工作演示

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

您可以尝试将该服务的引用添加到指令本身..

指令：

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>

编辑：我经历了你的傻瓜，终于让它运转了。

您可以查看更新的代码here

Answer 3

@RutwickGangurde和其他有问题的人，如果你试图设置一个范围变量而不是它不会工作的对象。我猜这是你目前在服务中做的事情：

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

然后尝试在指令/控制器中设置它：

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

这对于在服务更改时获取服务中的更新变量无效。

请在您的服务中尝试此操作：

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

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

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

并在你的HTML中：

for (i in 1:nrow(df)){
         if(df$Dismissal[i]=="empty")({ 
         df$Dismissal[i]=df$Dismissal[i-1] 
         }
    }

我会将此作为评论，但我还没有足够的权限，所以决定以一个非常简短的例子作为回复发布。

将服务变量绑定到指令？

3 个答案: