顯示$的角度控制器不是動態路由中的函數錯誤

我正在嘗試創建一個角度動態路由。我的路由是這樣的：

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。我在這裏弄錯了什麼？

編輯：從意見和答案的幫助下

SOLUTION 後：：我用這個玩弄了一點，我與這個另一種解決方案去了。我將$route.current.templateUrl添加到$scope.theTemplateUrl，然後在模板文件中使用ng-include。這沒有竅門，我也不需要使用jquery $函數來操縱DOM。

來源

2014-05-02 Neel

它出現的角度無法找到的jQuery。你是如何將它注入到你的應用程序中的？ –

@JBNizet您的評論根本沒有幫助。對我們來說，這顯然是一個jQuery的錯誤......但顯然他不知道這一點。他也沒有要求他的控制者提供任何建議。我知道這是最好的做法，但在這種情況下並不影響他的問題。 –

@ShanRobertson：對你而言顯而易見的不是我。對我來說，就像OP認爲angular基於jQuery一樣，而且$是一個內置函數，可以像使用jQuery一樣使用它。事實並非如此，因此我的評論。只是因爲他沒有要求他的控制者提供任何建議，所以不應該阻止我幫助他，因爲他告訴他DOM操縱不應該是控制器的一部分。這個網站的重點是幫助。 –

請小提琴。這段代碼的有限範圍禁止幫助:)

通過只看你在做什麼，我只能提出一些建議。但我認爲你的問題在於.html（）。

停止在學習Angular時使用jQuery。
使用$ scope來更改頁面上的內容。而不是

$（'＃view-template'）。html（$ compile（msg.data）（$ scope））;

做到這一點

$scope.viewTemplate = msg.data

然後在您的視圖中使用的角度:)

只有使用控制器來協調的信息流。不應該在這裏發生DOM操作。 DOM應該反映控制器的狀態。
在您的應用程序配置中定義路線。這是不正確的。

$ route.current.templateUrl ='partials /'+ $ routeParams.name +「。HTML「;

我在github上回購了一些示例站點，你可以看看，如果你想看到一些完整的網站工作在：https://github.com/breck421

好像你已經錯過了一些關鍵部位角。確保你把你的時間和學習的權利。它會讓你的生活變得更容易稍後。

感謝，

喬丹

爲路線提供者添加例子：

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); 
       } 
      ); 
     }; 
    }]); 
});

來源

2014-05-02 19:20:58

謝謝喬丹。我正在嘗試創建一個動態角度路由，我試圖從本教程改編，我在這裏閱讀：https://github.com/gregorypratt/AngularDynamicRouting 我會嘗試將該值添加到範圍。但是，如果我做'$ scope.viewTemplate = msg.data'，我是否還需要編譯通過'$ http'獲取的html，以便我能夠在視圖中顯示它？ – Neel

我看着那個回購。我不認爲這是一個好主意。只是因爲你可以在JavaScript中做某件事並不意味着你應該這樣做。如果您需要更多靈活的路由解決方案，請嘗試ui-router，https://github.com/angular-ui/ui-router。我在一個非常複雜的角度應用程序中使用它。你可能還得編譯你的msg.data。我用我編寫的編譯指令完成了這個工作。那麼你會有這樣的事情：

出於好奇，爲什麼你的承諾返回HTML。似乎過於僵化的解決方案。 –

承諾返回html的原因是因爲我使用routeprovider來標識動態傳遞的模板標識，然後顯示該模板標識的html。 – Neel

$函數由jQuery定義，而不是角度。確保你已經包含了jQuery庫以便使用$

來源

2014-05-02 19:01:59 alexsanford1

$也是有角度的。 Angular也包含jQuery lite。 –

顯示$的角度控制器不是動態路由中的函數錯誤

回答

相關問題