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追加模板。