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

我以前已经使用过angular js，但现在我在angular js中使用controller作为语法，我无法绑定模板

我的控制器代码：

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

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

我的模板是：

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

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

{{feed.feedList.title}

feed.html页面：

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

<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"));

与

因为在幕后，您的自定义变量

vm

与

Angular$scope

绑定。因此，

$compile

的工作原理与使用带有$scope语法的

经典控制器时一样

2） 在你的装订里

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

应该是

ng-controller="Feeds as vm"

在上述更改之后，它应该可以工作