Question

我是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"}
        ];
    }

Answer 1

来自文档：

ngInclude|src - {string} - 评估为网址的角度表达式。如果源是一个字符串常量，请确保将其包装在引号中，例如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网址。

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

编辑：

我打算给你一个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

Angular JS，是否可以动态设置ng-include或ng-controller？

1 个答案: