路由問題與角指令

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。