javascript - AngularJS 中的条件 View

Question

我有一个关于 AngularJS 中条件部分类似 View 的问题。下面的例子不是很理想。它还返回属于行 $compile(element.contents())(scope) 的错误这说明我不能使用 scope作为一个函数 - 但否则它不会正确渲染所有内容。用例如下:

1. 我正在请求一条经过 $http 的路线返回一个对象数组

2. 我是ng-repeat返回对象数组

3. 对于每个对象(我们称之为 obj )一个 obj.view_edit值已给出。

4. 如果obj.type等于 plugin ，一个<plugin></plugin>指令已插入

看起来像:

 <plugin view="content.view_edit"></plugin>

我的指令如下所示:

 directive('plugin', function($compile) {
    var linker = function(scope, element, attrs) {
        console.log(scope.view);
        element.html(scope.view).show();
        $compile(element.contents())(scope);
    }
    return {
        restrict:"E",
        link: linker,
        scope: {
            view:'='
        }
    }
})

您还有更好的解决方案吗？

Answer 1

在处理更复杂的问题之前，您不需要在链接函数中手动进行 DOM 操作来隐藏/显示或 $compile 。只需使用 native ng-if 指令即可。

<div ng-repeat="obj in objects">
    <div ng-if="isPlugin(obj)">
        <plugin view="obj.view_edit"></plugin>
    </div>
    <div ng-if="!isPlugin(obj)">
        This is not a plugin.
    </div>
</div>

然后，您的作用域中就会有一个被 ng-if 引用的函数。这可以使 HTML 保持干净并且尽可能清晰地保留逻辑。

scope.isPlugin = function (obj) {
    return obj.type === 'plugin';
}