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

我是Angular JS的新手，通过研究看起来这是不可能的，但我想仔细检查/看看是否有一些替代方案会有类似的结果。Angular JS，是否可以动态设置ng-include或ng-controller？

我想要做的是从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"} 
     ]; 
    }

来源

2013-05-13 Alex

从文档：

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-13 18:19:53 kelf

我很抱歉，我很新的这一点，我无法破译什么功能的各个部分是做或它的整体目标。。这是一个从控制器设置url的函数吗？ – Alex 2013-05-13 18:44:22

我更新了我的问题，以更好地反映我目前的系统是什么，如果有帮助..我能够得到它现在正确解决我的网址..它会说ng-include src =“example.html”，而不是示例。网址，但它没有加载它？ – Alex 2013-05-13 18:47:06

谢谢，这对我来说容易得多 - 但是，当我简单地编写ng-include =“example.url”时，最终结果仍然是ng-include =“example.url”:(它不计算任何东西 – Alex 2013-05-13 19:02:53

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

回答

相关问题