Angular中的指令和控制器之间的变量交换

Question

我知道这已被问及时间的负载，但我似乎无法为我的情况找到合适的答案。

目前我有一个表单“邀请更多的人”，需要一个名称和电子邮件。 该表单下方是一个“邀请更多朋友”的按钮，该按钮将触发一条指令“add-more-person”，该指令将添加另一个表单。

我希望人们不能邀请超过10个朋友。当有10个“邀请朋友形式”时，我希望隐藏按钮。

因此，我在指令中添加了一个计数器，以便在10个以后添加更多表单，并向我的控制器添加一个布尔型“addFriends”。

现在我希望我的布尔addFriends只要指令的计数器达到一定数量就改为false。

我不能使用$ watch来实现这一点，因为我没有使用$ scope，而我尝试的所有其他事情都失败了。

这是我的代码如下所示：

<div class="row"> 
     <div class="column medium-6">     
      <button ng-show="post.addFriends" class="btn-grey" type="button" add-more-person add-friends="post.addFriends">Invite more people</button> 
     </div> 
     <div class="column medium-6"> 
      <button class="btn-green" type="button">Send</button> 
    </div> 
</div> 

指令：

(function() { 
'use strict'; 

angular.module('app').directive('addMorePerson', addMorePerson); 

function addMorePerson($rootScope, $window, $timeout) { 
    return { 
     restrict: 'A', 
     scope: { 
      addFriends: '=' 
     }, 
     link: function(scope, elem, attr) { 
      var counter = 0; 
      console.log('start: ' + scope.addFriends); 

      elem.bind('click', appendInput); 

      function appendInput() { 

       if(counter < 2) { 
        var myEl = angular.element(document.querySelector('#content-form')); 

        var template = '<div class="content">' + 
         '<div class="form-page">' + 
         '<div class="form-field">' + 
         '<label class="form-label">Naam:</label>' + 
         '<div class="form-controls">' + 
         '<input kl_virtual_keyboard_secure_input="on" type="text">' + 
         '</div>' + 
         '</div>' + 
         '<div class="form-field">' + 
         '<label class="form-label">E-mail <span>(verplicht)</span>:</label>' + 
         '<div class="form-controls">' + 
         '<input type="email">' + 
         '</div>' + 
         '</div>' + 
         '</div>' + 
         '</div>'; 
        myEl.append(template); 
        counter++; 
       } else { 
        scope.addFriends = false; 
        console.log('after: ' + scope.addFriends); 
        return; 
       } 
      } 
     } 
    }; 
} 
})(); 

和控制器：

(function() { 
'use strict'; 

angular 
    .module('app') 
    .controller('PostDonateController', postDonateController); 

function postDonateController(apiFactory, $sessionStorage, $localStorage, $state, $stateParams) { 

    var that = this; // jshint ignore: line 

    that.addFriends = true; 

} 
})(); 

我离开了我所有的代码，使其更具可读性。所以我的控制台登录指令告诉我，它确实从真正开始，并在3次点击后变成false。但是这个值不会传递给我的控制器，因此不会隐藏按钮。任何想法如何我可以实现这一点？

Answer 1

在附加函数的列表行调用scope.$apply();，它将执行指令和控制器之间的同步。你应该这样做，因为你在角度上下文之外追加模板。

但是你的解决方案很尴尬，你应该通过ng-repeat追加模板。