通过控制器和指令动态更新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";/" 
    } 
});