Question

我创建了一个自定义指令，我想在整个应用程序中使用它来显示ModelState错误（从MVC web api抛出），但错误没有显示在自定义指令生成的html片段中，但错误div显示没有任何消息。请帮帮我。

cmApp.directive("modelError", function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
           errors: '@'
        },
        template: '<div class="row">' +
                    '<br />' +
                    '<div class="span10">' +
                        '<div class="alert-error alert" ng-show="errors" ng-switch="errors.length">' +
                          '<strong>Error!</strong>' +                              
                          '<ul ng-switch-default>' +
                            '<li ng-repeat="error in errors">{{error}}</li>' +
                          '</ul>' +
                        '</div>' +
                    '</div>' +
                '</div>',
    };
});

Html代码：

<model-error errors="{{modelErrors}}"></model-error>

控制器代码：

$scope.modelErrors = validationService.getModelErrors(response);

我只看到“错误！” div而不是错误消息。

Answer 1

在传递属性值之前不需要插值：

<model-error errors="modelErrors"></model-error>

另外，请尝试将隔离范围类型更改为=：

scope: {
       errors: '='
},

来自稳定的directive docs：

范围 - 如果设置为：

true - 然后将为此指令创建一个新范围。如果   同一元素上的多个指令请求一个新的范围，只有一个   新范围已创建。新范围规则不适用于根   因为模板的根总是得到一个新的模板   范围。

{}（对象哈希） - 然后创建一个新的“隔离”范围。该   'isolate'范围与正常范围不同，因为它没有   原型继承自父范围。这很有用   创建可重复使用的组件，不应该意外地读取或   修改父范围中的数据。 'isolate'范围需要一个对象   hash，它定义了一组派生自的局部范围属性   父范围。这些局部属性对于别名值很有用   用于模板。 Locals定义是本地范围属性的哈希值   来源：

@或@attr - 将本地范围属性绑定到DOM的值   属性。由于DOM属性，结果总是一个字符串   字符串。如果未指定attr名称，则属性名称为   假设与本地名称相同。范围的给定和小部件定义：{localName：'@ myAttr'}，   那么widget作用域属性localName将反映插值   hello {{name}}的值。由于名称属性发生了变化，因此   小部件范围上的localName属性。该名称是从   父范围（不是组件范围）。

=或= attr - 在本地范围属性和通过值定义的名称的父范围属性之间设置双向绑定   oftr属性。如果未指定attr名称，则为该属性   假定name与本地名称相同。给定范围的小部件定义：{   localModel：'= myAttr'}，然后是widget范围属性localModel   反映父范围内parentModel的值。任何改变   parentModel将反映在localModel和任何更改中   localModel将反映在parentModel中。

＆安培;或＆amp; attr - 提供在上下文中执行表达式的方法   父范围。如果未指定attr名称，则为属性名称   假定与本地名称相同。给定范围的小部件定义：{   localFn：'＆amp; myAttr'}，然后隔离范围属性localFn将指向   count = count + value表达式的函数包装器。经常   希望通过表达式从隔离范围传递数据   对于父作用域，可以通过传递本地地图来完成   变量名和值到表达式包装器fn中。例如，   如果表达式是增量（金额），那么我们可以指定金额   通过将localFn调用为localFn（{amount：22}）来获取值。

AngularJS自定义指令无法正常工作

1 个答案: