这个问题已经在这里有一个答案:
我试图创建一个自定义指令来渲染下拉列表(选择)。
app.directive("uiDropdown", function () {
return {
restrict: "E",
replace: true,
scope: {
'model': '=ngModel',
'readOnly':'=?'
},
templateUrl : 'template/dropdownTemplate.html',
link: function (scope, elem, attrs) {
}
};
});
该模板
<span ng-if="!readOnly">
<select ng-model="model" >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
HTML代码中使用的指令是
<ui-dropdown ng-model="region" read-only='readOnly'>
该plunker代码plunker
如果我删除代码“NG-IF =‘!readOnly的’”从模板文件,它工作正常。如果我从改变“NG-IF”到“NG-秀”,它正在为好。
我失去了一些东西在这里?实际上,该指令是应该做更多的功能比这个例子中显示的。我perfer用NG-如果代替NG-表演。请解决此问题的帮助。
它具有与ng-if
创建自己的子范围,那么你就直接使用原始的事实做。 ng-if
实际上将创建一个没有关系父本地model
布尔值。这将与ng-if
一个问题,即使没有被通过指令中使用它了。
你可以通过一个对象,并读取/设置该对象的值解决此问题。以下是表明你ng-if
问题不相关的指令,然后如何使用对象解决这个问题一个简单的例子:
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.readOnly = false;
$scope.primitive = "1";
$scope.object = {
selectedValue: "1"
};
})
.directive('uiDropdown', function() {
return {
restrict: 'E',
templateUrl: 'dropdownTemplate.html',
scope: {
model: '=ngModel',
fieldName: '@',
readOnly: '=?'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div>
<label>Readonly: <input type="checkbox" ng-model="readOnly" /></label>
</div>
<div>
<h1>ng-if with primitive - no directive</h1>
<h2>This will not work</h2>
<div>
Value: {{ primitive }}
</div>
<div ng-if="!readOnly">
<select ng-model="primitive">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div>
<h1>ng-if with object - directive</h1>
<h2>This will work</h2>
<div>
Value: {{ object.selectedValue }}
</div>
<ui-dropdown ng-model="object" read-only="readOnly" field-name="selectedValue"></ui-dropdown>
</div>
<script type="text/ng-template" id="dropdownTemplate.html">
<div ng-if="!readOnly">
<select ng-model="model[fieldName]">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</script>
</div>
NG-如果包含这是真或假尝试声明
<ui-dropdown ng-model="region" read-only='true'>