角度指令でのルーティングの問題

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> 

異なる経路のためにあなたがそれぞれ異なるコントローラを持つことができるか、1つのコントローラでそれを処理したい場合は、それができるようにインクルードディレクティブのコントローラーは異なる、一つだけを持っていますが、 、

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' });     
}); 

これらすべてのテンプレートではディレクティブを指定してください。 （これにより、ディレクティブのテンプレートが変更される可能性がありますが、ビューのテンプレート内の各ビューのDOMを変更することができます&ディレクティブのテンプレートを一定に保ちます） viewControllerで$ routeParamsを使用して現在のルートを確認できます& preferencesDirectiveのコントローラ。

ここで、ディレクティブテンプレートを条件付きで変更する必要がある場合は、ng-include insideディレクティブのテンプレートを使用してください。

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から共有します。