通过控制器和指令 Angularjs 动态更新 ng-include

Question

页面左侧有时只有信息，有时有侧边菜单。当有侧边菜单时，主要部分的内容取决于点击的选项。

由于在多个地方使用了同一种布局，我为 link/info 侧边菜单创建了嵌套指令。

我对 link 选项有疑问。单击 link 后，它会调用控制器函数来更新主要内容容器的 ng-include 位置。控制器确实更新了包含 ng-include link 的变量，但 ng-include 不包含新模板。

HTML: 左侧

<left-side hasmenu='hasMenu' update-tab='updateTab' options='menuOptions'></left-side>

主要内容区：

<div id="tabContentWrapper" class="left two-third-screen-tab " ng-include="tab">

控制器：

    var myStatsController = angular.module('myStatsController', []);

    myStatsController.controller('StatsCtrl',
    ['$scope', '$rootScope',function ($scope, $rootScope){

    //default tab
    $scope.tab = 'stats/views/stats.html';

    $scope.updateTab = function(newTab){
             $scope.tab=newTab;                   
            };

    //all tabs
    $scope.menuOptions =[{'text':'Stats','link':'stats/views/stats.html','isTab':true,'isFullScreen':false},
                {'text':'Summary','link':'stats/views/summary.html','isTab':true, 'isFullScreen':false}
    }]);

指令： 1) 左侧指令 HTML:

<div class="sideMenu left">
<div ng-switch="hasmenu" class="sideMenuNavSection">
    <side-menu ng-switch-when="true"  update-tab="updateTab(tab)" options='options'></side-menu>
    <side-info ng-switch-when="false" options='options'></side-info>
</div>
<home-button></home-button>

指令代码：

//left side area
myDirectives.directive('leftSide', function () {

return {
    restrict: 'AE',
    replace: true,
    scope:
    {
        options: "=",
        hasmenu:"=",
        updateTab:"&"

    },
    templateUrl: 'shared/leftSide.html'
};

});

2) 选择显示内容的指令 link 或信息部分：

//side navigation

myDirectives.directive('sideMenu', function ($compile) {

return {
    restrict: 'AE',
    scope: {
        options: "=",
        updateTab:"&"
    },
    link: function (scope, element, attrs) {


        for (var item in scope.options) {
            if (scope.options[item].isTab === true) {
                var link = scope.options[item];
                element.append('<tab-link update-tab="'+attrs.updateTab+'" fullscreen = "' + link.isFullScreen + '" linktext="' + link.text + '" options="' + link.link + '"></tab-link>');
            }
            else {
                // info section - not relevant for question
            }
            $compile(element.contents())(scope);
        }

    }
};

});

最终指令构建 tabLink 并调用控制器函数 updateTab(newTab) 为 ng-include

更新 $scope.tab

myDirectives.directive('tabLink', function ($compile) {

return {
    replace: true,
    restrict: 'AE',
    scope: {
        options: "@",
        linktext: "@",
        fullscreen: "@",
        updateTab:"&"
    },
    template: '<div class="infoText narrow "><div class="sideMenuItem bold"><a href="javascript:void(0);">{{linktext}}</a></div><div class="greenArrow"></div></div>',
    link: function (scope, element, attr) {

        var tab = document.getElementById('tabContentWrapper');
        tab = angular.element(tab);

        element.on('click', function (event) {

            //calls controller function
            scope.updateTab()(scope.options);
            $compile(tab.contents())(scope);  
        }); 
    }
};
});

谢谢

Answer 1

因为您是通过点击普通元素来启动这个东西，所以它不会调用摘要循环。在 $scope.tab=newTab;

之后添加 $scope.$apply()

Answer 2

你好，我也想动态更改模板，我找到了一种方法，如下所示： 1) 设置ng-include值如下：

<div ng-controller="mainCtrl">
        <div id="tabContentWrapper" class="left two-third-screen-tab " ng-include="getTab()">
</div>

2) 在控制器中定义函数 "getTab()" 如下：

  app.controller("mainCtrl", function(){
    $scope.getTab = function (){
      // you can have different conditions here for e.g.
      if(x){
          return "x template path";
      }else if (y){
          return "y template path";
      }
      // Or you can just return path directly as "/return "path of the template";/"
   }
});

通过控制器和指令 Angularjs 动态更新 ng-include

Dynamic update of ng-include through controller and directive Angualar-js

angularjs

angularjs-directive

angularjs-ng-include

angularjs-controller