我正在尝试设置我的第一个 Angular 项目,但在掌握路由方面遇到了困难。
在页面加载时,我看到了首选项指令设置的初始模板,这很棒。
当我单击“更改模板”按钮时,我希望将其更改为另一个模板,但没有任何反应。如果我将 $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>
最佳答案
为了使路由正常工作,您必须创建不同的 View 及其关联的 Controller ,然后在该 View 中添加指令。而且您还需要在 index.html 中使用 ng-view 指令,其中将加载所有路由 View 。而且 preferencesDirective
应该只包含可重用的独特功能和完整的应用程序 View ,以便您可以在不同的 View 组件旁边拥有具有不同数据集的不同 View 。
因此,您的模板可以是:
<div id="PreferencesApp" class="" ng-app="clientPreferencesModule">
<a href="#Details">Change Template</a>
<div ng-view></div>
</div>
现在,对于不同的路线,您可以拥有不同的 Controller ,或者如果您想在一个 Controller 中处理它,则只有一个 Controller ,但与指令的 Controller 不同,所以它可以,
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。 (这现在可能会更改指令的模板,但您可以更改 View 模板中每个 View 的 dom 并保持指令的模板不变) 现在,在 viewController 中,通过使用 $routeParams,您可以检查当前路线并将不同的数据发送到preferencesDirective 的 Controller 。
现在,如果您必须有条件地更改指令模板,请在指令模板内使用 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。
关于javascript - Angular Directive(指令)的路由问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46004409/