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

时间:2014-05-02 18:54:36

标签: angularjs function controller angularjs-scope

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

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

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

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

  1. 学习Angular时停止使用jQuery。
  2. 使用$ scope更改页面上的内容。而不是

    $( '#视图模板')的HTML($编译(msg.data)($范围));

  3. 这样做

    $scope.viewTemplate = msg.data
    

    然后在视图中使用angular:)

    1. 仅使用控制器来协调信息流。这里不应该和DOM操作一起发生。 DOM应该反映控制器的状态。

    2. 在应用配置中定义路线。这是不正确的。

      $ route.current.templateUrl ='partials /'+ $ routeParams.name +“。html”;

    3. 我在我的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);
                      }
                  );
              };
          }]);
      });