从子作用域到父作用域再到不同的子作用域
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()。
社区再一次提供了真正的帮助。
相关文章:
- 监视函数从服务返回不起作用,但作用域函数起作用
- 将作用域存储在JSON中
- 从控制器继承了隔离的作用域以生成可重用的指令
- 从ng模板访问作用域
- 调用私有作用域
- 对父作用域的指令更新延迟了一步
- 正在$rootScope上达到控制器作用域$在内部控制器上
- 两个指令创建新的继承的和隔离的作用域-元素得到哪个
- 这两个关于 JavaScript 作用域链的例子有什么区别?
- 在具有命名作用域的自定义Polymer元素中隐藏表行
- AngularJS指令隔离作用域
- Angularjs:修改js中的作用域,稍后在页面中使用
- 访问多个指令的隔离作用域
- Javascript作用域和Ajax调用;工作不正常
- 向Angular作用域对象添加对象数组——TypeError
- ng重复中的ng模型-初始化唯一作用域属性
- 在put方法之前从作用域获取数据
- 如何在html中以角度显示自定义指令的作用域
- 当提供函数名称时,检查函数是否存在于同一作用域中
- 当我更新另一个作用域变量时,作用域变量会自动更新