Question

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

由于在多个地方使用了相同类型的布局，因此我为链接/信息侧菜单创建了嵌套指令。

我的链接选项有问题。点击链接后，它会调用控制器功能来更新主要内容持有者的ng-include位置。 Controller确实更新了包含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和calles控制器函数updateTab（newTab）以更新$ scope.tab for ng-include

的指令

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

2 个答案: