指令とコントローラの間の可変角度交換

Question

これは時間のかかることがわかっていますが、私の場合は適切な答えを見つけることができないようです。

現在、私は名前とメールを受け取る "より多くの人を招待する"フォームを持っています。 そのフォームの下には、「他の友人を招待する」というボタンがあり、それは別のフォームを追加する「add-more-person」という指示をトリガーします。

私は人々が10人以上の友人を招待できないようにしたい。 10の「招待状」があるときは、ボタンを隠しておきたい。

私はディレクティブに10を加えた後にフォームを追加できないようにカウンタを追加し、コントローラには "addFriends"というブール値を追加しました。

ここで、ディレクティブのカウンタが一定の値に達すると、ブール型のaddFriendsをfalseに変更します。

私は$ scopeを使用していないので、私は$ watchを使ってこれを達成できません。私が試した他のすべてのものも失敗しました。

これは私のコードは次のようになります。

<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で追加する必要があります。