angular.js控制器使用$模板缓存服务的语法模板绑定 [英] angular.js controller as syntax template binding using $template cache service

问题描述

我已经使用过的角的js，但我现在用控制器在角JS语法，我不能够绑定模板。

i have already used angular js before but now i am using controller as syntax in angular js and i am not able to bind template.

我的控制器code：

(function () {
    angular.module("vkApp")
           .controller("Feeds", Feeds);
    function Feeds(FeedSetting, FeedLoader, $templateCache, $compile) {
        var vm = this;

        FeedSetting.initializeSetting(vm);
        //functions declaration
        vm.addFeed = addFeed;

        // function implementations
        function addFeed(text) {
            return FeedLoader.loadFeed("http://rss.cnn.com/rss/edition_world.rss")
                       .then(function (feedData) {
                           console.log(feedData.data.responseData.feed);
                           vm.feedList = feedData.data.responseData.feed;
                           var feedTemplate = $templateCache.get("feedTemplate");
                           feedTemplate.then(function (markup) {
                               $compile(markup.data)(vm).appendTo(angular.element("#FeedArea"));
                           });
                           return vm.feedList;
                       });
        }
    };

})();

我的模板是：

  <h7>{{feed.feedList.title}}</h7>

feed.html页：

<div id="rightSide" ng-controller="Feeds as feed">
     <div class="news-feed-wrapper" id="FeedArea">
     </div>
</div>

当执行绑定它给我的控制台错误

when the binding is performed it gives me error in console

推荐答案

您需要做一些修改

1）更换此行

$compile(markup.data)(vm).appendTo(angular.element("#FeedArea"));

与

$compile(markup.data)($scope).appendTo(angular.element("#FeedArea"));

由于现场您的自定义变量背后 VM 与绑定角$范围。因此， $编译想它采用的工作方式相同经典控制器$范围语法

because behind the scene your custom variable vm bind with Angular $scope. So $compile would work the same like it was using classic controller with $scope syntax

2），并在你的绑定替换

2) And in your binding replace

<h7>{{feed.feedList.title}}</h7>

与

<h7>{{vm.feedList.title}}</h7>

3）和内Feed.html

3) And inside Feed.html

ng-controller="Feeds as feed" 

应

ng-controller="Feeds as vm"

上面的修改后，它应该工作。

After the above changes it should work.

这篇关于angular.js控制器使用$模板缓存服务的语法模板绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！