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

我试图填充一个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' 
     } 
    } 
})

我对此有错吗？在我的HomePageController中，我需要做什么才能将create.html加载到$scope.getCreate？

来源

2016-03-06 DaveDev

由@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

来源

2016-03-07 00:31:13

这是* *几乎完美，除了线' '创造'：{'。当我指定视图名称创建时，它不起作用，但是当我使用'main'时，它确实如此。任何想法为什么？ – DaveDev

嗯，不确定。我比'Ionic版本更熟悉'angular-ui-router'。很高兴帮助:) –

你的方法对我来说似乎有些复杂。首先，您必须确保您的模板已加载到$ templateCache。这只发生在应用程序中第一次呈现模板时（例如，通过使用“templateUrl”属性）或者您可以通过自己的ajax调用从文件中获取数据并使用给定的$ interpolate，$角度编译函数。但是再次说明：这种情况似乎太复杂了。

其次，你将不得不使用ng-bind-html来代替，因为你在那里做的方式会被清理html。所以会有像等东西，而不是它的一个编译的html版本。

可能你只需要使用NG-include指令，而不是一切都会在一眨眼的功夫罚款;）

来源

2016-03-06 21:35:39

只需使用$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)策略可能会限制模板是否成功加载。

来源

2016-03-06 22:37:53 georgeawg

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

回答

相关问题