angular 指令的路由问题

Question

我正在尝试设置我的第一个 angular 项目，但无法掌握路由。

在页面加载时，我看到了由 preferencesDirective 设置的初始模板，这很棒。

当我单击 "Change Template" 按钮时，我希望它更改为另一个模板，但没有任何反应。如果我将 $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' });                
});

在所有这些模板中都有 preferencesDirective。（这现在可能会更改指令的模板，但您可以更改视图模板中每个视图的 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';
        }
    }
}

这里根据当前路由分享来自viewController的templateSrc。

angular 指令的路由问题

Routing issue with angular directives

javascript

angularjs

angular-routing

angular-directive

angular-controller