Question

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

Answer 1

在你的HTML中：

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

更改vendorId="someValue"

到vendor-id="someValue"

HTML属性不区分大小写，以避免混淆Angular将所有基于camel的变量（vendorId）转换为snake case属性（vendor-id）。

因此someValue未与vendorId绑定。导致模板中未定义vendorId。因此你的错误。

指令隔离范围1.2.2

1 个答案: