[英]Overriding Angular ui-select2 formatNoMatches in a directive
[英]ui-select2 inside directive isn't updating controller model
我有一个指令,它接受一个集合并建立一个下拉列表。
.directive("lookupdropdown", function () {
return {
restrict: 'E',
scope: {
collectionset: '=',
collectionchoice: '='
},
replace: true,
template: '<select class="input-large" ui-select2 ng-model="collectionchoice" data-placeholder="">' +
' <option ng-repeat="collection in repeatedCollection" value="{{collection.id}}">{{collection.description}}</option>' +
'</select>',
controller: ["$scope", function ($scope) {
$scope.repeatedCollection = new Array(); //declare our ng-repeat for the template
$scope.$watch('collectionset', function () {
if ($scope.collectionset.length > 0) {
angular.forEach($scope.collectionset, function (value, key) { //need to 'copy' these objects to our repeated collection array so we can template it out
$scope.repeatedCollection.push({ id: value[Object.keys(value)[0]], description: value[Object.keys(value)[1]] });
});
}
});
$scope.$watch('collectionchoice', function (newValue, oldValue) {
debugger;
$scope.collectionchoice;
});
} ]
}
});
这很好。 它建立了下拉没有问题。 当我更改下拉值时,将调用第二个watch函数,并且可以看到它将集合选择的值设置为所需的值。 但是,我放入指令中的collectionchoice并不绑定到新选择。
<lookupDropdown collectionset="SecurityLevels" collectionchoice="AddedSecurityLevel"></lookupDropdown>
这就是HTML标记。
这是javascript:
$scope.SecurityLevels = new Array();
$scope.GetSecurityLevelData = function () {
genericResource.setupResource('/SecurityLevel/:action/:id', { action: "@action", id: "@id" });
genericResource.getResourecsList({ action: "GetAllSecurityLevels" }).then(function (data) {
$scope.AddedSecurityLevel = data[0].SCRTY_LVL_CD;
$scope.SecurityLevels = data;
//have to get security levels first, then we can manipulate the rest of the page
genericResource.setupResource('/UserRole/:action/:id', { action: "@action", id: "@id" });
$scope.GetUserRoles(1, "");
});
}
$scope.GetSecurityLevelData();
然后,当我发布新的用户角色时,我将用户角色字段设置如下:
NewUserRole.SCRTY_LVL_CD = $scope.AddedSecurityLevel;
但这仍然是第一项,即使我已经更新了下拉菜单,根据监视功能,该下拉菜单已更改为正确的值。 我在这里想念什么?
由于Java语言中的原型自然继承,您遇到了这个问题。 让我尝试解释一下。 一切都是Javascript中的对象,一旦创建了对象,它就会继承所有Object.Prototype(s),最终导致最终对象即Object。 这就是为什么我们能够.toString()javascript中的每个对象(甚至是函数)的原因,因为它们都是从Object继承的。
由于Angular JS中对$ scope的误解,导致出现有关指令的特定问题。 $ scope不是模型,但它是模型的容器。 请参阅以下有关在$ scope上定义模型的正确和不正确方法:
...
$scope.Username = "khan@gmail.com"; //Incorrect approach
$scope.Password = "thisisapassword";//Incorrect approach
...
$scope.Credentials = {
Username: "khan@gmail.com", //Correct approach
Password: "thisisapassword" //Correct approach
}
...
这两个声明有很大的不同。 当您的指令更新其作用域(指令的隔离作用域)时,实际上是用新值完全覆盖了引用,而不是将实际引用更新为父作用域,因此断开了指令和控制器的作用域。
您的方法如下:
<lookupDropdown collectionset="SecurityLevels" collectionchoice="$parent.AddedSecurityLevel"></lookupDropdown>
这种方法的问题在于,尽管这种方法可行,但不是推荐的解决方案,这就是原因。 如果您的指令放置在另一个指令中,并且在指令的范围和实际控制器之间具有另一个隔离的范围,在这种情况下,您将不得不执行$parent.$parent.AddedSecurityLevel
而这可能会永远持续下去。 因此,不是推荐的解决方案。
结论:
始终确保有一个对象定义了作用域上的模型,并且每当您使用隔离作用域或使用使用隔离作用域的ng指令(即ng-model
只要查看某处是否存在dot(。),如果它丢失,您可能做错了事。
这里的问题是我的指令被转换为另一个指令。 使作用域将其所传入指令的子代传递给我。因此,类似$ parent-> $ child-> $ child。 当然,这是对第三层和第二层进行了更改。 但是第一层不知道发生了什么。 这修复了它:
<lookupDropdown collectionset="SecurityLevels" collectionchoice="$parent.AddedSecurityLevel"></lookupDropdown>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.