Question

我之前已经使用了角度js，但现在我使用控制器作为角度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>

执行绑定时，它会在控制台中显示错误

Answer 1

您需要进行一些更改

1）替换此行

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

带

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

因为在自定义变量vm与Angular $scope绑定的场景后面。因此，$compile的工作方式与使用classic controller with $scope syntax

时相同

2）并在你的绑定替换

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

与

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

3）在Feed.html内部

ng-controller="Feeds as feed"

应该是

ng-controller="Feeds as vm"

经过上述修改后，它应该有效。

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

1 个答案: