【AngularJS】在 directive 呼叫 controller 的 function

上週寫了一段 angular,有一個變數是拿來控制 divng-hidehtml 結構如下:

<body ng-controller="addDateControl">
    <a href="#" ng-click="showDate($event)">add one</a>
  <div clss="date-warp" ng-hide="dateDisable">
    <a href="#" vote-select-list>add date</a>
  </div>
</body>

主要是要讓 dateDisablevoteSelectList 能夠傳值呼叫得到,但問題就在於,directive 裡面並不會雙向bind,所以你如何在 voteSelectList 裡面去改變 dateDisable 的值,都不會改變到 controller 裡面的值。

於是我就上去 stackOverFlow去問了這個問題(連結),得到的解法是使用 scope.$emit()(說明參考),把實作的部份放到了plunker

程式碼如下:

var app = angular.module('GroupApp',[]);
app.controller('addDateControl',
    function ($scope) {
    $scope.dateDisable = true;

    $scope.$on('changeDateDisable', function(event){
        $scope.dateDisable = !$scope.dateDisable;
    });

    $scope.showDate = function ($event) {
      $event.preventDefault();
      $scope.$emit('changeDateDisable');
    };
  })
  .directive('voteSelectList', [ function () {
    return {
      restrict: 'A',
      link: function (scope, iElement, iAttrs) {
        iElement.bind('click', function(event) {
          event.preventDefault();
          
          scope.$emit("changeDateDisable");
          scope.$apply();
        });
      }
    };
  }]);

Comments

comments powered by Disqus