AngularJS中的条件视图

Question

我有一个问题涉及到AngularJS中的条件部分类似视图。下面的例子不是非常优化的。它还返回属于行$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 s，直到您处理更复杂的问题。只需使用本地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'; 
}