Question

我有一个从其父控制器使用继承范围的指令。该指令具有一个模板，该模板具有来自父控制器的绑定变量。在附带的plunker我有4个案例，证明更新服务和观察指令绑定变量更新。案例3我无法解释或理解为什么它不起作用。理想情况下，我希望案例3能够工作，如果公开的服务变量更新，那么指令绑定变量也会更新，不幸的是情况并非如此。

Plunker Example

script.js文件：

// Code goes here
(function() {
  'user strict'  ;

  //---------------//
  // define module //
  //---------------//
  angular.module('main', []);

  //-------------------//
  // define controller //
  //-------------------//
  angular.module('main').controller('indexController', IndexController);

  function IndexController($scope, messageService) {

    //scope variables
    $scope.message = messageService.getMessage;     //1
    $scope.ms = messageService;                     //2
    $scope.varMessage = messageService.varMessage;  //3
    $scope.varObject = messageService.varObject;    //4

    //scope functions
    $scope.updateMessageOne = UpdateMessageOne;
    $scope.updateMessageTwo = UpdateMessageTwo;

    //private controller functions
    function UpdateMessageOne() {

      messageService.setMessage('ONE!');

    }

    function UpdateMessageTwo() {

      messageService.setMessage('TWO!');

    }

  }

  //----------------------//
  // define directive one //
  //----------------------//
  angular.module('main').directive('messageDirective', MessageDirective);

  function MessageDirective() {

    //Return Directive Definition Object or "DDO"
    return {
      restrict : 'E',
      templateUrl : 'message.tmpl.html'
    };

  }

  //----------------//
  // define service //
  //----------------//
  angular.module('main').service('messageService', MessageService);

  function MessageService(){

    //private variables
    var privateMessage = 'Initial Message';

    var privateObj = {
      message : 'Initial Message'
    }

    //service methods
    function SetMessage(newMessage){
      privateMessage = newMessage;
      privateObj.message = newMessage;
    }

    function GetMessage(){
      return privateMessage;
    }

    //return service definition
    return {
      setMessage : SetMessage,
      getMessage : GetMessage,
      varMessage : privateMessage,
      varObject : privateObj
    }

  }

})();

指令模板HTML：

<div>
  Case 1 : {{message()}}
</div>
<div>
  Case 2 : {{ms.getMessage()}}
</div>
<div>
  Case 3 : {{varMessage}}
</div>
<div>
  Case 4 : {{varObject.message}}
</div>

索引页面HTML：

<!DOCTYPE html>
<html ng-app="main">

  <head>
    <script data-require="angular.js@1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="indexController">

    <message-directive></message-directive>

    <button ng-click="updateMessageOne()">Update Message One</button>
    <button ng-click="updateMessageTwo()">Update Message Two</button>

  </body>

</html>

Answer 1

读完你的代码后我会说是，案例3不会得到更新。原因是因为当你返回服务定义对象并将angular注入你的控制器时。 messageService 与您返回的对象相同。清楚我的意思做出以下改变：

更新 UpdateMessageOne 功能，如下所示

function UpdateMessageOne() {
  console.log(messageService);
  messageService.setMessage('ONE!');
  console.log(messageService);
}

现在单击按钮，查看控制台。你会发现对象是相同的，当然是正常的。因为即使您更新了私有变量， messageService 对象也与注入角色时的对象相同。

所以我不知道任何方法可以让你实现你想要的。但你现在可以做的就是使用 GetMessage 功能，就像你对其他人一样。

绑定到Service变量的指令模板未更新

1 个答案: