Question

我的问题是，每页（或任何需要的地方）为指令指定一个控制器是“允许的”，不是一个好主意，或者是否有更好的做事方式？

示例：将ng-controller="SocialMentionsAnalysisController"添加到我的og-social-mentions-social-media-nav指令中，以充分利用该控制器的功能。见下文：

<og-social-mentions-social-media-nav ng-controller="SocialMentionsAnalysisController"></og-social-mentions-social-media-nav>

原因是我一直在努力创建一个不会重新加载页面的锚定滚动菜单。

当我遇到以下方法时，我尝试了许多不同的可能解决方案：

1。在我的控制器中添加此方法：

  $scope.redirectTodiv = function(divname,event) {
     var id = $location.hash();
      $location.hash(divname);
      $anchorScroll();
      $location.hash(id);

   };

2。创建我的菜单链接：

<li><a href ng-click="redirectTodiv('top', $event)"><img title="Post List" src="images/postList.svg" title="" height="25" /><span class="navText">Summary</span></a></li>
<li><a href ng-click="redirectTodiv('mentionList', $event)"><img title="Mentions List" src="images/postList.svg" title="" height="25" /><span class="navText">Mentions List</span></a></li>

第3。当然，在我的控制器中注入$location和$anchorScroll。

这很好用，但我努力使用我的导航指令来完成这项工作，直到我在指令中指定了控制器，如上所述。

那么，这样可以吗？

编辑：我的控制器功能最少。这是我的控制器代码：

angular.module('portalDashboardApp')
  .directive('ogSocialMentionsSocialMediaNav',['MenuState', function(MenuState) {
    return {
      restrict: 'E',
      replace: true,
      templateUrl: './socialMedia.module/socialMedia.templates/SocialMentionsSocialMediaNavTemplate.html',
      link: function(scope) {
        scope.getClass = MenuState.getClass;
      }
    };
}]);

Answer 1

您可以尝试使用ui-router来解决此问题。

例如，您有一个指令菜单：

myApp.directive('menu', function() {
    return {
        restrict: 'E',
        template: '<nav class="nav">'+
'  <ul>'+
'    <li><a ui-sref="summary">Summary</a></li>'+
'    <li> <a ui-sref="mentions">Mentions</a></li>'+
'  </ul>'+
'</nav>',
        replace: true,
        link: function(scope, elm, attrs) {
            console.log("Run Menu");                       
        }
    };
});

在根应用中添加常规配置：

angular.module("myApp", ["ui.router", "AppCtrls1", "AppCtrls2"]);
    myApp.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider.state('root', {
            abstract: true,
            views: {
                "header@": {},
                "main@": {},
                "footer@": {}
            }
        });
     });

最终在应用程序的HTML中：

<menu></menu> 
<div ui-view="main"></div>

现在您可以创建两个应用程序：

第一个应用在同一个应用中有一个子视图summary-level-2，您也可以将其他应用注入子视图。

/** APP ONE **/
var subApp1 = angular.module("AppCtrls1", []);

subApp1.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state("summary", {
    parent:'root',
    views:{
       "main@":{
          controller: "Ctrl1",
              template: '<section class="red"><p>Summary</p> <div ui-view></div></section>'
       }
    },
    url: "/summary"
  })
  .state("summary-level-2", {
    parent:'summary',
    controller: "Ctrl2",
    template: '<p class="green">summary-level-2</p>',
    url: "/summary-level-2"
  });
});


subApp1.controller("Ctrl1", function($scope) {
  console.log("Ctrl1 loaded.");
});

subApp1.controller("Ctrl2", function($scope) {
  console.log("Ctrl2 loaded. level 2");
});


/** APP two **/
    var subApp2 = angular.module("AppCtrls2", []);
    subApp2.config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
      .state("mentions", {
        parent:'root',
        views:{
           "main@":{
              controller: "Ctrl1",
                  template: "<p>Mentions</p>"
           }
        },
        url: "/mentions"
      });
    });

    subApp2.controller("Ctrl1", function($scope) {
      console.log("Ctrl1 loaded.");
    });

您可以在Jsfiddle中看到一个实时示例。

为指令指定控制器以在特定页面上使用

1 个答案:

现在您可以创建两个应用程序：