Question

我试图填充ion-content容器。我想将HTML加载到$scope，具体取决于用户点击的标签：

<ion-tabs tabs-type="tabs-icon-only">
    <ion-tab ...>
    <ion-tab title="Create" icon-on="ion-android-create">
        <ion-content padding="true" class="has-header">
            {{getCreate}}
        </ion-content>
    </ion-tab>
    <ion-tab ...>
</ion-tabs>

这是此视图的控制器：

(function () {
    'use strict';

    angular.module('ionicApp')
        .controller('HomePageController', ['$scope', '$state', '$templateCache', HomePageController]);

    function HomePageController($scope, $state, $templateCache) {
        $scope.getCreate = function() {

            // at the moment create.html is just simple static html.
            return $templateCache.get('app/views/home/ads/create.html');
            //return $templateCache.get('main.create'); // this also doesn't work
        };
    }
})
();

两个相关的州被定义为：

.state('main.home', {
    url: '/home',
    views: {
        'main': {
            templateUrl: 'app/views/home/home.html',
            controller: 'HomePageController'
        }
    }
})

.state('main.create', {
    url: '/create',
    views: {
        'main': {
            templateUrl: 'app/views/home/ads/create.html',
            controller: 'CreateAdController'
        }
    }
})

我是不是错了？如何在我的create.html中将$scope.getCreate加载到HomePageController？

Answer 1

你的方法对我来说似乎有点过于复杂。首先，您必须确保您的模板已加载到$ templateCache。这仅在模板首次在应用程序中的某个位置呈现时发生（例如，通过使用“templateUrl”属性）或者，您可以通过自己的ajax调用从文件中获取数据，并使用给定的$ interpolate，$ angular函数从angular进行编译。但话又说回来：对于这种情况来说，这似乎太复杂了。

其次你必须使用ng-bind-html，因为你在那里做的方式将被清理的html被看到。所以会有类似的东西等，而不是它的编译html版本。

可能你应该简单地使用ng-include指令，一眨眼间一切都会好的;）

Answer 2

只需使用$http.get：

   $http.get($scope.template.url).then (function(response) {
       console.log(response);
       $scope.contents = response.data;
   });

DEMO on PLNKR。

浏览器的Same Origin Policy和Cross-Origin Resource Sharing (CORS)政策可能会限制模板是否成功加载。

Answer 3

由@Patrick Kelleter提出，您的方法过于复杂，包括使用$ templateCache手动处理并编译HTML。

为什么不按照设计的方式使用路由器？

首先，重命名州的视图，以便您可以明确地引用它：

.state('main.create', {
    url: '/create',
    views: {
        'create': {
            templateUrl: 'app/views/home/ads/create.html',
            controller: 'CreateAdController'
        }
    }
})

然后使用选项卡上的ui-sref=更改状态，并使用<ion-nav-view ...>将特定名称的视图插入状态模板。

<ion-tabs tabs-type="tabs-icon-only">
    <ion-tab ...>
    <ion-tab title="Create" icon-on="ion-android-create" ui-sref="main.create">
        <ion-content padding="true" class="has-header">
            <ion-nav-view name="create"></ion-nav-view>
        </ion-content>
    </ion-tab>
    <ion-tab ...>
</ion-tabs>

当点击标签时，路由器会将app/views/home/ads/create.html的内容插入<ion-nav-view name="create">元素。

以下是完整的演练：Build an App with Navigation and Routing - Part 1

如何将html模板加载到$ scope中？

3 个答案: