从子作用域到父作用域再到不同的子作用域

Child Scope to Parent Scope Down to different child Scope

本文关键字:作用域      更新时间:2023-09-26

我有板球运动员卡,用户可以在其中从可能的30张中选择11张,在测试atm中有2张,问题是,我在子作用域中选择球员,该子作用域将他们添加到父作用域中声明的数组中。然后,同一个数组被映射到不同的子作用域,但值不会向下传递。代码如下,任何帮助都将是伟大的。干杯

var page = '<div class="section cricket">' +
'<div class="input-frame " focus-after-error fill-panel>' +
'<p>Your Choices</p>' +
'<div class="chosen-cards" data-cards-chosen="chosenPlayers" data-chosen-cards>' +
'</div>' +
'</div>' +
'<div class="input-frame" focus-after-error fill-panel>' +
'<fieldset class="cricket-inputs" id="custom-checkbox" data-error-message="There is an error" data-required="true" data-cards="" data-player-cards="players">' +
'</fieldset>' +
'</div>' +
'</div>';
 var card = '<div class="card" ng-repeat="playerCard in playerCards" data-choose-card="" data-name="    {{playerCard.name}}" data-img="{{playerCard.img}}">' +
'<div class="player" >' +
'<img src="images/{{playerCard.img}}">' +
'<div class="inner-overlay"></div>' +
'</div>' +
'<p>{{playerCard.name}}</p>' +
'</div>';
 (function () {
'use strict';
// --------------------------------------------------------------------------
// Cricket Page
// --------------------------------------------------------------------------
angular.module('eform').directive('cricket', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        template: page,
        scope: true,
        controller: function($scope){

        },
        link: function($scope, $element){
            $scope.players = [
                {name: 'George Baily', img: 'Bailey.png'},
                {name: 'Micheal Clarke', img: 'Clarke.png'}
            ];
            $scope.chosenPlayers = [];
            $timeout(function(){
                $element = $element.find('.card');
                $element.on('click', function(){
                    var $this = $(this);
                    if($this.hasClass('chosen')){
                        $this.removeClass('chosen').removeClass('active');
                    } else {
                        $this.addClass('chosen');
                        $scope.chosenPlayers.push({name : $this.attr('data-name'), img : $this.attr('data-img')});
                    }
                });
                $($element[0]).hover(function() {
                    var $this = $(this);
                    $this.addClass('active');
                }, function() {
                    var $this = $(this);
                    $this.removeClass('active');
                });

            });
        }
    };
}]);
})();
(function () {
'use strict';
// --------------------------------------------------------------------------
// Cricket card
// --------------------------------------------------------------------------
angular.module('eform').directive('cards', [ function () {
    return {
        restrict: 'A',
        template: card,
        scope : {
            playerCards : '=playerCards'
        }
    };
}]);
})();

(function () {
'use strict';
// --------------------------------------------------------------------------
// Cricket card
// --------------------------------------------------------------------------
angular.module('eform').directive('chosenCards', [ function () {
    return {
        restrict: 'A',
        template: card,
        scope : {
            playerCards : '=cardsChosen'
        }
    };
}]);
})();

为所有提供帮助的人干杯。原来我需要

$scope.apply()。

社区再一次提供了真正的帮助。