Question

我有一个问题涉及AngularJS中的条件部分类视图。以下示例不是最佳选择。它还会返回属于行$compile(element.contents())(scope)的错误，该错误表明我不能将scope用作函数 - 否则它将无法正确呈现所有内容。用例如下：

我正在请求一条路由$http返回一个对象数组
我ng-repeat返回了对象数组
对于每个对象（我们称之为obj），都会给出obj.view_edit值。
如果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，直到您处理更复杂的问题。只需使用本机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';
}

AngularJS中的条件视图

1 个答案: