angular.js 控制器作为使用 $template 缓存服务的语法模板绑定

我之前已经使用过 Angular JS，但现在我在 Angular JS 中使用控制器作为语法，并且无法绑定模板。

我的控制器代码：

(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>

执行绑定时，它在控制台中给出错误

你需要做一些改变

1）替换这条线

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

with

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

因为在幕后你的自定义变量vm与 绑定Angular $scope. So $compile会像使用一样工作classic controller with $scope syntax

2）并在你的绑定中替换

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

with

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

3）在Feed.html里面

ng-controller="Feeds as feed" 

应该

ng-controller="Feeds as vm"

经过上述更改后，它应该可以工作。