AngularJS

Question

我正在尝试使用 ng-repeat 和控制器来动态加载选项卡内容。

控制器代码：

angular.module('ogn.userprefs').controller('UserprefsController', ['$scope',
    function($scope) {
        $scope.tabs = [
            { title: 'Personal Information', content: "ng-include=''modules/userprefs/views/personalinfo.html''"},
            { title: 'Sign In & Security', content: 'modules/userprefs/views/signin_security.html'},
            { title: 'Account Preferences', content: 'modules/userprefs/views/accountprefs.html'}
        ];
}]);

HTML代码：

<div ng-show="subnav" class="userprefs">
  <div ng-controller="UserprefsController" class="subnav-tabs">
    <!--<tabset>
      <tab heading="Personal Information">
        <div ng-include="'modules/userprefs/views/personalinfo.html'"></div>
      </tab>
      <tab heading="Sign In &amp; Security">
        <div ng-include="'modules/userprefs/views/signin_security.html'"></div>
      </tab>
      <tab heading="Account Preferences">
        <div ng-include="'modules/userprefs/views/accountprefs.html'"></div>
      </tab>
    </tabset>-->
    <tabset>
      <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
        {{tab.content}}
      </tab>
    </tabset>
  </div>
</div>

被注释掉的HTML代码是我之前调用我tab中内容的方式，使用hg-include。我想切换到 ng-repeat 并通过控制器调用它，但出现的只是 content: 之后的文本。我可以在 content 之后替换什么来调用我的 html 页面？

感谢任何帮助！提前致谢！

Answer 1

您应该使用 <ng-include> 指令并将 src 属性设置为您的范围变量。像这样：

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="{{tab.active}}">
    <ng-include src="tab.content"></ng-include>
</tab>

这里有一个 js fiddle 用法演示。

Answer 2

angular.module('ogn.userprefs').controller('UserprefsController', ['$scope',
    function($scope) {
        $scope.tabs = [
            { title: 'Personal Information', content: 'personalinfo.html'},
            { title: 'Sign In & Security', content: 'signin_security.html'},
            { title: 'Account Preferences', content: 'accountprefs.html'}
        ];
}]);


<div ng-show="subnav" class="userprefs">
  <div ng-controller="UserprefsController" class="subnav-tabs">
    <tabset>
      <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
        <div ng-include="modules/userprefs/views/{{tab.content}}"></div>
      </tab>
    </tabset>
  </div>
</div>

这应该可以，但是 here 是我准备的一个小例子。我猜 tabs 作用域中的第一个索引与 double '' 混淆了。记得下载并包含 ui.bootstrap

Answer 3

您真的应该尝试预加载这些模板或使用自定义指令，因为使用 <ng-include> 会创建不必要的监视。如果您不希望它发生变化，也可以考虑对选项卡数组使用一次性绑定语法。

AngularJS - 通过控制器加载选项卡中的内容

AngularJS - Load content in tab through controller

angular-ui-bootstrap