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 code：

<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代码是我之前使用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是我用示例准备的一个小东西。我猜选项卡范围中的第一个索引正在弄乱双''。记得下载并包含ui.bootstrap

Answer 3

您应该尝试预加载这些模板或使用自定义指令，因为使用<ng-include>会创建不必要的监视。如果您不希望它更改，请考虑为制表符数组使用一次性绑定语法。

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

3 个答案: