2

ディレクティブがありますが、コントローラーとそれに注入されたサービスへのアクセスに問題があります。これが私の指示です：

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では、ディレクティブに挿入されたコントローラーまたはサービスにアクセスできません。コントローラーまたはサービスにアクセスするにはどうすればよいですか?

更新サービスは次のとおりです。

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

1 に答える 1

0

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>
于 2013-10-18T18:32:05.503 に答える