Question

我知道这已被问过很多次，但我似乎无法为我的案件找到合适的答案。

目前我有一张表格可以邀请更多人＃34;这需要一个名字和电子邮件。在该表单下方是一个按钮＆＃34;邀请更多朋友＆＃34;这将触发指令＆＃34;添加更多人＆＃34;这将添加另一种形式。

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

所以我在指令中添加了一个计数器，这样你就不能在有10个之后添加更多的表格，而且还有一个布尔值＆＃34; addFriends＆＃34;到我的控制器。

现在我希望每当指令的计数器达到一定数量时，我的布尔值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;

}
})();

我遗漏了所有其他代码，使其更具可读性。所以我的控制台登录指令告诉我它确实从true开始，经过3次点击后它变为false。但是这个值不会传递给我的控制器，因此不会隐藏按钮。我有什么想法可以实现这个目标吗？

Answer 1

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

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

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

1 个答案: