如何將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？

回答

相關問題