javascript - 指令隔离范围 1.2.2

Question

我是第一次使用 Angular 1.2.2 版并尝试制作一个简单的指令，该指令使用带有“=”绑定(bind)的隔离范围来传入对象。我以前做过几次，所以我想知道 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!。我是否遗漏了一些明显的东西，阻止这些值在隔离范围内被双向绑定(bind)？

Answer 1

在您的 html 中:

<vendor-selector vendorId="someValue"></vendor-selector>

更改 vendorId="someValue"

到 vendor-id="someValue"

HTML 属性不区分大小写，以避免混淆 Angular 将所有驼峰式变量(vendorId)转换为蛇形变量(vendor-id)。

所以 someValue 没有绑定(bind)到 vendorId。导致 vendorId 在模板中未定义。因此你的错误。