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

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>