Question

我有一个指令，但是我在访问控制器和注入其中的服务时遇到问题。这是我的指示：

angular.module('clinicalApp').directive('chatContainer', ['encounterService', function(encounterService) {
  return {
    scope: {
      encounter: '=',
      count: '='
    },

    templateUrl: 'views/chat.container.html',

    controller: 'EncounterCtrl',

    link: function(scope, elem, attrs, controller) {
      scope.addMessage = function(message) {
        //RIGHT HERE

        scope.resetChat();
      };
      scope.resetChat = function() {
        scope.chatText = '';
        scope.updateCount(scope.chatText);
      };
    }
  };
}]);

你可以看到我在链接函数中将一些函数附加到我的作用域。在这些方法中，如addMessage，我无权访问我的控制器或注入指令的服务。如何加入控制器或服务？

UPDATE 这是服务：

angular.module('clinicalApp').factory('encounterService', function ($resource, $rootScope) {
  var EncounterService = $resource('http://localhost:port/v2/encounters/:encounterId', {encounterId:'@id', port: ':8280'}, {
    search: {
      method: 'GET'
    }
  });

  var newEncounters = [];
  var filterTerms = {};

  EncounterService.pushNewEncounter = function(encounter) {
    newEncounters.push(encounter);
    $rootScope.$broadcast('newEncountersUpdated');
  };

  EncounterService.getNewEncounters = function() {
    return newEncounters;
  }

  EncounterService.clearNewEncounters = function() {
    newEncounters = [];
  }

  EncounterService.setFilterTerms = function(filterTermsObj) {
    filterTerms = filterTermsObj;
    $rootScope.$broadcast('filterTermsUpdated');
    EncounterService.getFilterTerms(); //filter terms coming in here, must redo the search with them
  }

  EncounterService.getFilterTerms = function() {
    return filterTerms;
  }

  return EncounterService;
});

和chat.container.html

<div class="span4 chat-container">
 <h5 class="chat-header">
  <span class="patient-name-container">{{encounter.patient.firstName }} {{encounter.patient.lastName}}</span>
</h5>
<div class="chat-body">
  <div class="message-post-container">
    <form accept-charset="UTF-8" action="#" method="POST">
      <div class="text-area-container">
        <textarea id="chatBox" ng-model="chatText" ng-keyup="updateCount(chatText)" class="chat-box" rows="2"></textarea>
      </div>
      <div class="counter-container pull-right">
        <span class="muted" id="counter">{{count}}</span>
      </div>
      <div class="button-container btn-group btn-group-chat">
        <input id="comment" class="btn btn-primary btn-small btn-comment disabled" value="Comment" ng-click="addMessage(chatText)"/>
      </div>
    </form>
    <div messages-container messages="encounter.comments">
    </div>
  </div>
</div>
</div>

Answer 1

以下是我玩的演示 Plunker 。

我从指令中删除了scope{....}，并在控制器和指令中添加了2个值，以了解它们如何更改操作方面的问题。

<强> JS

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

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


   // listen on any change of  chatText in directive
    $scope.$watch(function () {return $scope.chatText;},
    function (newValue, oldValue) {
        if (newValue == oldValue) {return;}
        $scope.chatTextFromController = newValue;
    }, true);

});

app.directive('chatContainer', ['encounterService', function(encounterService) {
  return {


    templateUrl: 'chat.container.html',

    link: function(scope, elem, attrs) {
      scope.countStart = scope.count;

      scope.updateCount = function(chatText) {
          alert('updateCount');
        scope.count = scope.countStart - chatText.length;
      };
      scope.addMessage = function(message) {
          alert('addMessage');
        encounterService.sayhello(message);
        scope.resetChat();
      };
      scope.resetChat = function() {
          alert('resetChat');
        scope.chatText = 'someone reset me';

        scope.name = "Hello " + scope.name;

        scope.updateCount(scope.chatText);
      };
    }
  };
}]);

app.service('encounterService', function() {
  var EncounterService = {};

  EncounterService.sayhello = function(message) {
    alert("from Service " + message);
  };

  return EncounterService;
});

<强> HTML

<body ng-controller="MainCtrl">
    <div chat-container></div>
    <pre>chatText from directive: {{chatText|json}}</pre>
    <pre>chatText from controller: {{chatTextFromController|json}}</pre>
     <pre>name: {{name|json}}</pre>
  </body>

在我的链接函数中访问服务或控制器 - Angular.js

1 个答案: