Question

我将使用$ templateCache脚本标记来显示我的html视图。目前我有，

<body ng-app="myApp">
    <div ng-controller="myAppController">
    ....
    ....
    <div class="col-xs-12">
        <my-settings></my-settings>
    </div>

..
..
    </div>

我的app.js，

var myApp = angular.module('myApp', ['editor']);

myApp.config(['$httpProvider', function($httpProvider) {
 ....
 ....
}]);

myApp.controller('myAppController', ['$scope', '$http', '$rootScope', function ($scope, $http,$rootScope) {
//Other stuff
}

directive.js

'use strict';

angular.module('editor').directive("my-settings", function() {
    return {
        templateUrl: '/views/templateId.html'
    };
});

我想通过脚本标签或作为服务使用$ templateCache。但是在通过服务添加此项时，我必须将所有html元素放在$ templateCache.put（）中。

var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
  $templateCache.put('templateId.html', 'This is the content of the template');
});

现在我想，我会改用脚本标签。

<script type="text/ng-template" id="templateId.html">
  <p>This is the content of the template</p>
</script>

从文档中，它必须是$ rootElement的后代。所以我必须放置脚本。这会被包含在<body ng-app="myApp">内的同一个文件中吗？

Answer 1

您需要在定义指令的名称时使用驼峰套管：

.directive("mySettings" ...

此外，您可以在与指令相同的范围内定义内联模板，如下所示：

<div ng-controller="myAppController">
    ....
    ....
    <div class="col-xs-12">
        <my-settings></my-settings>
    </div>

..
..
    <script type="text/ng-template" id="templateId.html">
      <p>This is the content of the template</p>
    </script>
  </div>

只需确保内联模板的ID与templateUrl匹配即可。你可以查看工作小提琴here。

通过脚本标记使用$ templateCache

1 个答案: