我第一次使用Angular 1.2.2版,并试图制作一个简单的指令,该指令使用带有'='绑定(bind)的isolate范围来传递对象。我之前已经做过几次,所以我想知道在1.2.2中是否有更改可以改变这一点?
这是我的指令:
.directive('vendorSelector', function (VendorFactory) {
return {
restrict: 'E',
replace: true,
scope: { vendorId: '=' },
template: '<select ng-model="vendorId" ng-options="id for id in vendorIds">' +
'<option value="">-- choose vendor --</option>' +
'</select>',
link: function (scope, element, attrs) {
VendorFactory.getVendorIds().then(function(result) {
scope.vendorIds = result;
});
}
}
})
使用指令的HTML模板如下:
<div class="padding">
<vendor-selector vendorId="someValue"></vendor-selector>
{{ someValue }}
</div>
和后备 Controller :
.controller('AddProductController', function($scope, ProductFactory, AlertFactory) {
$scope.vendorId = 0;
$scope.someValue = undefined;
})
我尝试使用$ scope.someValue和$ scope.vendorId作为html模板中提供的对象。在这两种情况下,我返回的错误都是
Expression 'undefined' used with directive 'vendorSelector' is non-assignable!
。我是否遗漏了一些明显的东西,这些东西阻止这些值在隔离范围内进行2位绑定(bind)? 最佳答案
在您的html中:
<vendor-selector vendorId="someValue"></vendor-selector>
更改
vendorId="someValue"
到
vendor-id="someValue"
HTML属性不区分大小写,因此避免混淆Angular将所有驼峰式变量(vendorId)转换为蛇形属性(vendor-id)。
因此
someValue
并没有绑定(bind)到vendorId
。结果vendorId
在模板中未定义。因此,您的错误。