How can I binding variable from directive to controller in angular.js?

Question

I use a dateDisable variables to hide the div date-warp , the button 'add one', can to change dateDisable variable value to False , but the button 'add date' can not change variable to True . How can I let the code can work? thank you.

HTML

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

JS

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

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

Answer 1

Do you mind putting your question on Plunker ?

Once you do that, we can have the ability to freely play around with the code. I see two errors from a high level.

• <div clss="date-warp" ng-hide="dateDisable"> Your class name is missing an "a"
• In your directive, the link function has 3 attributes that are usually very strict concerning what they are. You are currently using (scope, iElement, iAttrs) where it should be (scope, element, attrs)

From a high-level these may not do anything, but there is a small chance they are what is causing the error. For more about the custom directive properties, check out the AngularJS docs here

Hope that helps! Good luck!

Answer 2

you should be able to do something in your directive like

scope.$emit("addedDate");
scope.$apply();

Inside your click binding, and in your controller do something like

$scope.$on("addedDate", function(){
  $scope.dateDisable = true;
});