I have two files as described below. I am defining the controller in file_1.php
In file_2.php, I am 'require'ing the file_1.php, and then moving the ul into the div that is described in file_1.php
What I want to be able to do is - get the functions within the controller to work for the ul which was dynamically added. My guess is that, when the page was loaded, the ul block is seen as being outside the controller and so it doesn't work. On searching, I was able to see a solution that involved $compile, but that works for ng-model, and not for repeat or {{}} either. I am new to Angular and would appreciate any help.
file_1.php
<?php
<div id="box_1" ng-controller="MyCtrl"></div>
?>
file_2.php
<?php
require 'file_1.php';
?>
<ul>
<li ng-repeat="item in items">item.text</li>
</ul>
{{items}}
<script>
function MyCtrl($scope) {
$scope.items = [{text: "Item 1", text: "Item 2"}];
}
$(document).ready(function() {
$('#box_1').append($('ul'));
})
</script>
Some information that I found: In the documentation here, under section "Reasons behind the compile/link separation", they have explained why compiling is different for ng-repeat. Could anyone explain what it means exactly and/or the way to go about it? I tried compile - anything that is not in an ng-repeat works, but anything inside ng-repeat doesn't.
Are you wedded to this file structure for some reason? What you're trying to do goes against the grain of angular and will thus be a pain. Angular is supposed to free you from the pain of DOM manipulation with jQuery.
It seems like using $compile should work, though. Can you show us what you're trying to do with it?
Why is it that you can't do something like this?
<div id="box_1" ng-init="items = [{text: "Item 1", text: "Item 2"}]">
<ul>
<li ng-repeat="item in items">{{item.text}}</li>
</ul>
{{items}}
</div>
(The syntax might be a bit off on ng-init.)
It is not good practice to manipulate the DOM in a controller. Aside of that, doesn't $scope.$apply() help?
$(document).ready(function() {
$('#box_1').append($('ul'));
$scope.$apply();
})