我正在尝试创建一个Angular Dynamic Routing。我的路由是这样的:
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', { templateUrl: 'partials/blank.html' });
$routeProvider.when('/:name', { templateUrl: 'partials/blank.html', controller: PagesController });
$routeProvider.otherwise({redirectTo: '/'});
}]);
这里我使用$http
在控制器中获取模板文件并将其编译为div id,如下所示:
function PagesController($scope, $http, $route, $routeParams, $compile) {
$route.current.templateUrl = 'partials/' + $routeParams.name + ".html";
$http.get($route.current.templateUrl).then(function (msg) {
$('#view-template').html($compile(msg.data)($scope));
});
}
在模板视图中,我有一个这样的div:
<div id="view-template" ng-view></div>
我认为上面的代码会编译并将html数据添加到div中,但我收到的错误是:$ is not a function
。我在这里遇到了什么错误?
编辑: 在以下评论和答案的帮助下
解决方案: :我正在玩这个更多的东西,我为此另一个解决方案。我将$route.current.templateUrl
添加到$scope.theTemplateUrl
,然后在模板文件中使用了ng-include
。这样做了,我也不需要使用jquery $
函数来操作DOM。
答案 0 :(得分:1)
$
函数由jQuery定义,而不是angular。确保已包含jQuery库以使用$
答案 1 :(得分:1)
请小提琴。此代码段的有限范围会抑制帮助:)
通过查看你在做什么,我只能提出一些建议。但我认为你的问题在于.html()。
使用$ scope更改页面上的内容。而不是
$( '#视图模板')的HTML($编译(msg.data)($范围));
这样做
$scope.viewTemplate = msg.data
然后在视图中使用angular:)
仅使用控制器来协调信息流。这里不应该和DOM操作一起发生。 DOM应该反映控制器的状态。
在应用配置中定义路线。这是不正确的。
$ route.current.templateUrl ='partials /'+ $ routeParams.name +“。html”;
我在我的github仓库中有一些示例网站,如果你想看到一些完整的网站工作,你可以看一下:https://github.com/breck421
好像你错过了Angular的一些关键部分。确保你花时间学习它。它会让你以后的生活更轻松。
谢谢,
约旦
添加了路由提供程序示例:
MyApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'js/views/index.html',
controller: 'AppController',
activeTab: 'home'
})
.when('/home', {
templateUrl: 'js/views/index.html',
controller: 'AppController',
activeTab: 'home'
})
.when('/thing1', {
templateUrl: 'js/views/thing1.html',
controller: 'Thing1Controller',
activeTab: 'thing1'
})
.otherwise({redirectTo: 'home'});
}]);
然后使用以下链接:组件
编辑为每个请求添加编译指令:
angular.module('CC.directive.Compile', [], function($compileProvider) {
$compileProvider.directive('compile', ['$compile', function($compile) {
// directive factory creates a link function
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
return scope.$eval(attrs.compile);
},
function(value) {
element.html(value);
$compile(element.contents())(scope);
}
);
};
}]);
});