Question

我正在尝试创建一个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。

Answer 1

$函数由jQuery定义，而不是angular。确保已包含jQuery库以使用$

Answer 2

请小提琴。此代码段的有限范围会抑制帮助：）

通过查看你在做什么，我只能提出一些建议。但我认为你的问题在于.html（）。

学习Angular时停止使用jQuery。
使用$ 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);
                }
            );
        };
    }]);
});

Angular Controller显示$不是动态路由中的函数错误

2 个答案: