范围和指令AngularJs
问题描述:
我很新的AngularJs和我建立与它的小应用程序,以挑战自己。范围和指令AngularJs
这是一见钟情很简单:我想可以选择多个条件,然后选择一个值的基础上,选择的标准,所以我们以后可以过滤数据。 因此,我想维护一个“标准值”夫妇数组,以便稍后将其发送给服务器。
所有到目前为止,我所做的是在这样的:plunker
的错误是,所有的“选择”指令都依赖于彼此...... 我知道问题来自模型变量的作用域“ selectedValue“和”chosenCriterion“,它们被所有指令共享,但是如何使它们的语言环境变为属于类”_new_criterion“的一个div,并且同时访问数组allChoices?
而且我应该如何填充我的“allChoices”对象有类似
[
{
criterion : "CITY",
value : "San Francisco"
},
{
criterion : "COMPANY",
value : "Something"
}
]
我不知道这是否是实现这一目标的正确方法,所以随时提出的其他解决方案。
这里是应用程序的源代码示例:
var app = angular.module('app', []);
angular.module('app').controller('MainCtrl', function($scope, $compile) {
$scope.allCouples = [];
$scope.add = function(ev, attrs) { //$on('insertItem',function(ev,attrs){
var criterionSelector = angular.element(document.createElement('criteriondirective'));
var el = $compile(criterionSelector)($scope)
angular.element(document.body).append(criterionSelector);
};
});
app.directive('criteriondirective', function($compile) {
return {
template: '<div class="_new_criterion"><select ng-model="chosenCriterion" ng-change="chooseCriterion(chosenCriterion)" ng-options="criterion.columnName for criterion in criteria" class="form-control"></select></div>',
restrict: 'E',
replace: true,
transclude: false,
compile: function(tElement, tAttrs, transclude) {
return function(scope, element, attr) {
scope.chooseCriterion = function(sel) {
var valueSelector = angular.element(document.createElement('valuedirective'));
var el = $compile(valueSelector)(scope);
tElement.append(valueSelector);
};
//rest call to get these data
scope.criteria = [{
columnName: 'turnover',
type: 'range'
}, {
columnName: 'city',
type: 'norange'
}, {
columnName: 'company',
type: 'norange'
}];
};
}
};
});
app.directive('valuedirective', function() {
return {
template: '<select ng-model="chosenValue" ng-options="value for value in values" ng-change="chooseValue(chosenValue)" class="form-control"></select>',
restrict: 'E',
replace: true,
transclude: false,
compile: function(tElement, tAttrs, transclude) {
return function(scope, element, attr) {
scope.chooseValue = function(sel) {
//I would like to register the couple "criterion-value" into the array allCouples how to pass the criterion as parameter to this directive ?
// scope.allCouples.push({criterion : "criterion", value : "value"});
};
//Rest call to get these data
scope.values = ["Paris", "San Francisco", "Hong-Kong"];
};
}
};
});
非常感谢您
PS:不支付太多注意值阵,在现实情况下,数据被取出REST风格
非常感谢你“的范围:真正的”作品!不知道这个选择 – Acen1991 2014-12-07 22:02:55