Изменения в переменных области действия директивы не обновляют родительские переменные области действия. Угловой Js 1.5

Question

Это мой контроллер

 function commentController($stateParams, commentFactory, $rootScope){
  const ctrl = this;
  ctrl.comment = {};
  ctrl.decision = {};
  ctrl.$onInit = function(){
    ctrl.decision.replyVisible = false;
  }

export {commentController}

Это мой компонент

import {commentController} from './comment.controller'

export const commentComponent = 'commentComponent'
export const commentComponentOptions = {
  bindings: {
    post: '<'
  },
  templateUrl: 'blog/src/app/components/post/comment/comment.html',
  controller: ['$stateParams', 'commentFactory', '$rootScope', commentController],
  controllerAs: 'cm'
}

Это моя директива

 function showReply(){
  return {
    restrict: 'A',
    scope: {
      collapsed: '<'
    },
    link: function(scope, element, attrs){
      element.on('click', ()=>{
        console.log(`Trying to hide ${scope.collapsed}`);
        scope.collapsed = true
        console.log(`Trying to hide ${scope.collapsed}`);
      })
    }
  }
}

function hideReply(){
  return {
    restrict: 'A',
    scope: {
      collapsed: '<'
    },
    link: function(scope, element, attrs){
      element.on('click', ()=>{
        scope.collapsed = false;
        console.log(`Trying to hide scope.replyVisible is ${scope.collapsed}`);
      })
    }
  }
}

export {showReply, hideReply}

Это мой HTML

 <div class="comment_wrapper">
  <div class="comment" ng-repeat="comment in cm.post.comments">
    <h3>{{comment.author.name}}</h3>
    <a href="" ng-hre="mailto:{{comment.author.email}}"></a>
    <p ng-bind-html="comment.comment"></p>
    <button show-reply collapsed="cm.decision.replyVisible">Reply</button>
    <div class="reply_wrapper" ng-show="cm.decision.replyVisible">
      <label for="name">Name</label>
      <input type="text" id="name" ng-model="cm.comment.author.name">
      <label for="email">Email</label>
      <input type="text" id="email" ng-model="cm.comment.author.email">
      <label for="comment">Comment</label>
      <textarea name="" id="comment" cols="10" rows="5" ng-model="cm.comment.comment"></textarea>
      <button ng-click="cm.reply(comment._id)">Submit</button> <button hide-reply collapsed="cm.decision.replyVisible">Cancel</button>
    </div>
  </div>
</div>

И это мой модуль

import angular from 'angular'
import {showReply, hideReply} from './comment.directive'
import {commentFactory, commentFactoryFunc} from './comment.factory'
import {commentComponent, commentComponentOptions} from './comment.component'

export const comment = angular.module('comment', [uiRouter])
.factory(commentFactory, ['$http', commentFactoryFunc])
.component(commentComponent, commentComponentOptions)
.directive('showReply', showReply)
.directive('hideReply', hideReply)
.name

Вот что я пытаюсь сделать, в моем html я хочу показать форму ответа, когда кто-то нажимает на кнопку ответа. И так как есть несколько комментариев для каждого с формой ответа, я не могу использовать обычные ng-click,

Изменения, внесенные в scope.collapsed не отразиться на cm.decision.replyVisible

Как мне сделать эту работу? Меня всегда смущало обращение к родительским переменным контроллера из директивы.

Answer 1

Вы должны использовать comment.decision.replyVisible вместо cm.decision.replyVisible

HTML

 <div class="comment_wrapper">
  <div class="comment" ng-repeat="comment in cm.post.comments">
    <h3>{{comment.author.name}}</h3>
    <a href="" ng-hre="mailto:{{comment.author.email}}"></a>
    <p ng-bind-html="comment.comment"></p>
   <button show-reply 
     collapsed="comment.decision.replyVisible">Reply</button>
   <div class="reply_wrapper" ng-show="comment.decision.replyVisible">
     <label for="name">Name</label>
     <input type="text" id="name" ng-model="cm.comment.author.name">
     <label for="email">Email</label>
     <input type="text" id="email" ng-model="cm.comment.author.email">
     <label for="comment">Comment</label>
     <textarea name="" id="comment" cols="10" rows="5" ng-model="cm.comment.comment"></textarea>
     <button ng-click="cm.reply(comment._id)">Submit</button> <button hide-reply collapsed="cm.decision.replyVisible">Cancel</button>
  </div>
 </div>
</div>