AngularJs ng-include src =“sample.html”不起作用

Question

我将我的 html 放在脚本中，如下面提到的链接中所述：-

Is it possible to use ng-include without web server?

喜欢：-

<script type="text/ng-template" id="infowindow.html">
  <h4>{{data[0]}},{{data[1]}}</h4>
 <button ng-click="test()">click</button>
</script>

但是当我试图将此 html 放入我的内容中以便在标记单击时显示信息窗口时，它不会加载模板。

这是我的代码：-

app
  .factory(
    'Map',
    function($rootScope, $compile) {

      var canvas = document.getElementById('map'),
        defaults = {
          center: new google.maps.LatLng(0, 0),
          zoom: 4,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

      return {
        init: function(map_data, scope) {

          var user_data = map_data.user.defaults,
            locations = map_data.locations,
            map_opts = {
              "center": (typeof user_data.center !== 'undefined') ? new google.maps.LatLng(
                user_data.center[0],
                user_data.center[1]) : defaults.center,
              "zoom": (typeof user_data.zoom !== 'undefined') ? parseInt(
                user_data.zoom, 10) : defaults.zoom,
              "mapTypeId": defaults.mapTypeId
            };
         
          var Map = $rootScope.map = new google.maps.Map(
            canvas, map_opts);
          scope.markers = [];

          for (var count = locations.length, i = 0; i < count; i++) {

            var latLng = locations[i],
              marker = new google.maps.Marker({
                position: new google.maps.LatLng(
                  latLng[0], latLng[1]),
                map: Map,
                title: '(' + latLng[0] + "," + latLng[1] + ')'
              }),
              infowindow = new google.maps.InfoWindow();
            scope.markers[i] = {};
            scope.markers[i].locations = [latLng[0],
              latLng[1]
            ];

            var content = '<div id="infowindow_content" ng-include ="\'infowindow.html\'"></div>';
            var compiled = $compile(content)(scope);
            google.maps.event
              .addListener(
                marker,
                'click', (function(marker, scope,
                  compiled, localLatLng) {
                  return function() {
                    scope.data = localLatLng;
                    scope.test = test;
                    scope.$apply();
                    infowindow
                      .setContent(compiled[0].innerHTML);
                    infowindow.open(Map,
                      marker);
                  };
                })
                (
                  marker,
                  scope,
                  compiled,
                  scope.markers[i].locations));

          }
        }
      };

    });

我什至尝试使用 ng-include src ="'infowindow.html'"

任何帮助将不胜感激， 谢谢

Answer 1

是的，你可以。你可以运行下面的 sn-p。

两件事，当使用ng-include 时，你需要传递src="infowidnow.html" 的表达式，你需要传递src="'infowindow.html'"。这是因为可以使用约束模板字符串名称的变量。

我已经包含了一个有效的 sn-p，不过我建议您查看组件模式并且不要使用 ng-include。

同样，不要使用factory 并绑定到id="map"，您应该使用组件或指令并声明绑定到您的HTML 视图。现在看起来你正在与 AngularJS 作斗争。

function ButtonController() {
  this.data = ["Foo", "Bar"]
}
ButtonController.prototype.test = function() {
  alert('Test Clicked');
}

angular.module('app', [])
  .controller('ButtonController', ButtonController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  
  <div ng-controller="ButtonController as vm" ng-include src="'infowindow.html'"></div>

  <script type="text/ng-template" id="infowindow.html">
     <h4>{{vm.data[0]}},{{vm.data[1]}}</h4>
     <button ng-click="vm.test()">click</button>
  </script>
  
  
</div>