通過控制器和指令動態更新ng-include Angualar-js

Question

頁面左側有時只有信息，有時會有側面菜單。當有側面菜單時，主要部分的內容取決於所點擊的選項。

由於在多個地方使用同一種佈局，我爲鏈接/信息側菜單創建了嵌套指令。

我有鏈接選項的問題。點擊鏈接後，它會調用控制器功能更新主要內容持有者的ng-include位置。控制器會更新包含ng-include鏈接的變量，但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）指令該選擇什麼樣的顯示鏈接或信息部分：

//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）更新$ scope.tab爲NG-包括

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-包括值如下：

<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";/" 
    } 
});