Late to the party, but there is a little angular ‘hack’ to achieve this without implementing a dumb directive. Adding a built-in directive that will extend your controller’s scope (like ng-if) everywhere you use the ng-include will actually let you isolate the variable name for all the included scopes. So: <div ng-include=”‘item.html'” ng-if=”true” onload=”item = … Read more
It’s a little hacky, but I am passing variables to an ng-include with an ng-repeat of an array containing a JSON object : <div ng-repeat=”pass in [{‘text’:’hello’}]” ng-include=”‘includepage.html'”></div> In your include page you can access your variable like this: <p>{{pass.text}}</p>
I struggled with this problem for a while. What worked was to bind the input to an object instead of a primitive. <!– Partial –> <input type=”checkbox” ng-model=”someObject.someProperty”> Check Me! // Controller $scope.someObject.someProperty = false
It all depends on what you want from your code fragment. Personally, if the code doesn’t have any logic, or doesn’t even need a controller, then I go with ngInclude. I typically put large more “static” html fragments that I don’t want cluttering up the view here. (ie: Let’s say a large table whose data … Read more
If you are using Angular v1.1.5 or later, you can also use ng-if: <div ng-if=”x” ng-include=”‘/partial.html'”></div> If you have any older version: Use ng-switch: <div ng-switch on=”x”> <div ng-switch-when=”true” ng-include=”‘/partial.html'”></div> </div> Fiddle
ng-include accepts an expression. If you want to specify the explicit URL directly in there, you have to give a string. <div ng-include src=”‘page.html'”></div>
As @Renan mentioned, ng-include creates a new child scope. This scope prototypically inherits (see dashed lines below) from the HomeCtrl scope. ng-model=”lineText” actually creates a primitive scope property on the child scope, not HomeCtrl’s scope. This child scope is not accessible to the parent/HomeCtrl scope: To store what the user typed into HomeCtrl’s $scope.lines array, … Read more