路由问题与角指令

Question

我试图建立我的第一个角项目之一，我遇到了麻烦与路由交手。

在页面加载我看到已设置由preferencesDirective，这是伟大的初始模板。

当我点击“更改模板”按钮，我希望它改变到另一个模板，但没有任何反应。如果我将$ routeProvider中的模板URL设置为无效，那么我在调试器中看到一个404错误，它告诉我必须正常工作，但是当模板url有效时没有任何反应。如何让它正确更改？

谢谢。

<div id="PreferencesApp" class="" ng-app="clientPreferencesModule">  
    <preferences-directive factory-settings="clientPreferences"></preferences-directive> 
    <a href="#Details">Change Template</a> 
</div> 


<script> 

    var app = angular.module("clientPreferencesModule", ["ngResource", "ngRoute"]); 
    //var app = angular.module("clientPreferencesModule", ["ngRoute"]); 


    app.config(function ($routeProvider) {   
     $routeProvider.when("/", { controller: "clientPreferencesController", templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html' }); 
     $routeProvider.when("/Preferences/:id", { controller: "clientPreferencesController", templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html' }); 
     $routeProvider.when("/Preferences", { controller: "clientPreferencesController", templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html' }); 
     $routeProvider.when("/Details", { controller: "clientPreferencesController", templateUrl: '/AngularTemplates/ClientPreferences/DetailsTemplate.html' });     
    }); 



    app.controller('clientPreferencesController', clientPreferencesController); 

    clientPreferencesController.$inject = ["$scope", "$resource", "$rootScope", "$http", "$route", "$location"]; 

    function clientPreferencesController($scope, $resource, $rootScope, $http, $route, $location) {   
     this.model = @Html.Raw(JsonConvert.SerializeObject(Model));   
     $scope.location = $location.path();   
    } 

    app.directive('preferencesDirective', preferencesDirective); 

    function preferencesDirective() { 

     return { 
      restrict: 'EA', 
      scope: 
      { 
       factorySettings: '=' 
      }, 
      controller: 'clientPreferencesController', 
      controllerAs: 'pc', 
      bindToController: true, 
      templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html' 
     } 
    } 

</script> 

Answer 1

对于路由工作，你已经创建与其相关的控制器&沿着不同的意见，然后有一个视图内指令。还需要index.html中的ng-view指令，其中将加载所有路径视图。此外，preferencesDirective应该只包含可重复使用的唯一功能，即完整的应用视图，以便您可以在不同视图组件的不同视图中使用不同的数据集。 所以，你的模板可以是：

<div id="PreferencesApp" class="" ng-app="clientPreferencesModule">  
    <a href="#Details">Change Template</a> 
    <div ng-view></div> 
</div> 

现在对于不同的路线，你可以有各自不同的控制器，或者如果你要处理它在一个控制器的只有一个，但是从指令的控制器不同，所以可以，

app.config(function ($routeProvider) {   
    $routeProvider.when("/", { controller: "viewController", templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html' }); 
    $routeProvider.when("/Preferences/:id", { controller: "viewController", templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html' }); 
    $routeProvider.when("/Preferences", { controller: "viewController", templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html' }); 
    $routeProvider.when("/Details", { controller: "viewController", templateUrl: '/AngularTemplates/ClientPreferences/DetailsTemplate.html' });     
}); 

Have preferences在所有这些模板中都有指示。 （这现在可能会改变指令的模板，但你可以改变视图的模板中的每个视图的dom &保持指令的模板不变） 现在在viewController中使用$ routeParams，你可以检查当前的路由&发送不同的数据到preferencesDirective的控制器。

现在，如果你必须要有条件地更改指令模板然后利用NG-include指令的模板中。

function preferencesDirective() { 

    return { 
     restrict: 'EA', 
     scope: 
     { 
      factorySettings: '=', 
      templateSrc: '=' 
     }, 
     controller: 'clientPreferencesController', 
     controllerAs: 'pc', 
     bindToController: true, 
     templateUrl: '<ng-include src="pc.template()"></ng-include>' 
    } 
} 

function clientPreferencesController($scope, $resource, $rootScope, $http, $route, $location) {   
    this.model = @Html.Raw(JsonConvert.SerializeObject(Model));   
    $scope.location = $location.path();  
    $scope.template = function(){ 
     if($scope.templateSrc) { 
      return '/AngularTemplates/ClientPreferences/'+ $scope.templateSrc + '.html'; 
     } 
    } 
} 

这里共享，基于当前路线templateSrc从的viewController。