내 링크 기능에서 서비스 또는 컨트롤러에 액세스 - 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과 같은 메서드에서는 컨트롤이나 지시문에 삽입 된 서비스에 액세스 할 수 없습니다. 컨트롤러 또는 서비스를 어떻게 작동합니까? 여기에 내가 연주 데모 Plunker입니다

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

:

여기 UPDATE 는 서비스입니다.

지시어에서 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; 
}); 

<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>