javascript - Angular JS, is it possible to set ng-include or ng-controller dynamically? -


i new angular js , through research looks not possible wanted double-check/see if there alternative solution have similar result.

what want populate page json file, , load customized li using url on json file. this:

json/inside controller:

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

js (inside js)

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

solution :

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

where now: 

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

from documentation:

nginclude|src – {string} – angular expression evaluating url. if source string constant, make sure wrap in quotes, e.g. src="'mypartialtemplate.html'".

in case makes sense set custom ngresource. in controller, inject resource , query json, assign json scope variable.

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();     });

you set ng-include url loop on resource.

also, don't {{}} variable name.

edit:

i going give plunker, seems acting up. here inline source like. sake of clarity, removed resource piece. imagine want put when decide retrieve json remotely.

<!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}} valid, load in 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"}   ]; });

edit: plunk

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


Comments

Post a Comment

Popular posts from this blog

php - cannot display multiple markers in google maps v3 from traceroute result -

i'm newbie in php mysql , google maps v3. have problems in google maps v3. made traceroute web based , map traceroute's result in google maps v3 final project of college education. have try many tutorials didn't work. have tried tutorials in forum nothing worked. problem cannot display multiple markers got location data database. maybe because i'm newbie , not know how do. confuse looping show markers. here code <?php error_reporting(e_all ^ (e_notice)); ini_set('max_execution_time', 360); $enable_log_user = false; global $ip, $host_name, $host_ip; $host = @$_post['host']; $trace = @$_post['trace']; $self = $_server['php_self']; include("phpsqlajax_dbinfo.php"); $connection = mysql_connect ('127.0.0.1', $username, $password); if (!$connection) { die('not connected : ' . mysql_error());} $db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die ('can\'t use db : ...
Read more

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

i have detailsview control on page used edit various fields of record, works in respect. i looking way add 1 column (and if works, why not more) right, absolutely read-only, show same fields of record comparison purposes. i aware there no obvious way such thing out of box detailsview . have looked other controls (transposed gridview , recommended formview , listview ), nothing satisfies. have special data binding setup using detailsview , can't out of without losing features. anyone on how "hack in" additional columns (for display only) on detailsview ? the solution have now, use second detailsview , visible set false in aspx. in code, make sure databind hidden detailsview hosts data third column first, initial detailsview named itemdetails . and in item created event, pass third column html rendering of hidden controls (in last code block) : protected void itemdetails_itemcreated(object sender, eventargs e) { if (dataite...
Read more

javascript - firefox memory leak -

i have following script (i use raphaeljs also) draws circle, waits 1 second, draws circle again, etc (you can copy paste - functional, need include raphael raphaeljs.com): <div id="holder"> </div> <script src="raphael.js" type="text/javascript"></script> <script> var paper = raphael(10, 50, 320, 200); var rad = math.pi / 180; var finangle = 0; function sector(cx, cy, r, startangle, endangle, params) { var x1 = cx + r * math.cos(-startangle * rad), x2 = cx + r * math.cos(-endangle * rad), y1 = cy + r * math.sin(-startangle * rad), y2 = cy + r * math.sin(-endangle * rad); return ["m", cx, cy, "l", x1, y1, "a", r, r, 0, +(endangle - startangle > 180), 0, x2, y2]; } var path = sector(100,100,50,0,180); var arc = paper.path(path); function draw() { path = sector(100,100,50,0,finangle); ...
Read more