范围和指令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风格

来源

2014-12-06 Acen1991

你可能希望你的指令isolate the scopes，此刻他们的共享和修改相同的数据。例如，使用scope: true,来尝试。

来源

2014-12-07 19:57:53

非常感谢你“的范围：真正的”作品！不知道这个选择 – Acen1991 2014-12-07 22:02:55

范围和指令AngularJs

回答

相关问题