子范围到父范围向下到不同的子范围

时间:2014-09-05 21:37:54

标签: javascript angularjs

我有板球运动员牌,用户可以选择11个可能的30,有2个用于测试atm,问题是,我选择子范围中的玩家将它们添加到声明的数组中在父范围内。然后,相同的数组将映射到不同的子范围,但值不会传递下来。代码下面,任何帮助都会很棒。干杯!!

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'
        }
    };

}]);

})();

1 个答案:

答案 0 :(得分:0)

干杯每个帮助过的人。结果我需要

将值推入数组后,

$ scope.apply()。

社区再次真的很有帮助。