5

我是 Angular JS 的新手，通过研究，这似乎是不可能的，但我想仔细检查/看看是否有一些替代解决方案会产生类似的结果。

我想要做的是从 JSON 文件填充页面，并使用该 JSON 文件上的 url 加载自定义的 li。所以是这样的：

JSON/内部控制器：

function ExCtrl($scope) {

    $scope.examples = [
            {name:"example", 
            num: 1, 
            url:"website.html"}
        ];
    }

JS（JS内部）

<ul ng-controller="ExCtrl">
   <li ng-repeat="example in examples">
      <div ng-include src="folder/{{example.url}}> </div>
   </li>
</ul>

解决方案 ：

<ul ng-controller="ExCtrl">
   <li ng-repeat="example in examples">
      <div ng-include src="example.url"> </div>
   </li>
</ul>

现在在哪里：

function ExCtrl($scope) {

    $scope.examples = [
            {name:"example", 
            num: 1, 
            url:"folder/website.html"}
        ];
    }
4

1 回答 1

5

从文档中：

ngInclude|src– {string}– 角度表达式评估为 URL。如果源是字符串常量，请确保将其括在引号中，例如src="'myPartialTemplate.html'".

在您的情况下，设置自定义 ngResource 是有意义的。在控制器中，注入资源并查询 JSON，然后将 JSON 分配给范围变量。

angular.module("foo", "ngResource")

  .factory("ResourceType", function($resource){
    return $resource("/resourcetype/:id", {id: "@id"}, { "update": {method:"PUT"}});
  })
  .controller("ExCtrl" function($scope, ResourceType){
    $scope.examples = ResourceType.query();  
  });

然后，您将在循环访问资源时设置您的 ng-include url。

另外，不要 {{}} 您的变量名。

编辑：

我本来打算给你一个 Plunker，但它似乎在起作用。这是您想要的内联源代码。为了清楚起见，我删除了资源部分。我想当你决定远程检索 JSON 时，你会想把它放回去。

<!DOCTYPE html>
<html ng-app="angularjs-starter">

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <ul ng-controller="MainCtrl">
      <li ng-repeat="example in examples">
        If {{example.url}} were valid, it would load in the div. 
        <div ng-include="example.url"> </div>
      </li>
    </ul> 
  </body>
</html>

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.examples = [
     {name:"example", 
      num: 1, 
      url:"example.html"}
  ];
});

编辑：普朗克

http://beta.plnkr.co/edit/JNhqoJoykWKf4iqV0ieJ?p=preview

于 2013-05-13T18:19:53.380 回答