angularjs ng-include pass value from controller

Question

I'm trying to include subpages to my main page..

I'm using ng-include.. when I tried to put using this ng-include="'samplePage.php'" it works... but what I want is to assign the value of ng-include in the controller...

here's my hmtl code

<div id="navbar-override" class = "navbar navbar-inverse navbar-static-top" ng-controller="indexCtrl">
        <div class = "container">
            <div class = "navbar-header">
                <a href = "index.html" class = "navbar-brand">
                    Sample App
                </a>
                <button id="navbar-btn-override" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                </button>
            </div>
            <div class = "collapse navbar-collapse navHeaderCollapse">
                <ul class = "nav navbar-nav navbar-right">
                <li ng-repeat="link in Links"  ng-class="{'active': selectedItem === link}">
                    <a href = "javascript:void(0)" ng-click="Link(this)">{{ link }}</a>
                </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container" ng-include="pages">
          <!--subpages will append here-->
    </div>

my controller.js

indexApp.controller('indexCtrl', ['$window','$scope', '$http', function($window, $scope, $http) {

$scope.pages = "./pages/customer.php";

}]);

if you ask me why I do this.. because I'm planing to use ng-include dynamically......

I'm still new to angularjs so bear with me... thanks in advance..

sreeramu · Accepted Answer · 2016-04-14 02:22:50Z

This will work,

Your HTML :

<div ng-controller="Ctrl">
    <select ng-model="template" ng-options="t.name for t in templates">
     <option value="">(blank)</option>
    </select>
    url of the template: <tt>{{template.url}}</tt>
    <hr/>
    <div ng-include src="template.url" onload='myFunction()'></div>
  </div>

<!-- template1.php-->
<script type="text/ng-template" id="./pages/template1.php">
  Content of template1.php
</script>

<!-- template2.php-->
<script type="text/ng-template" id="./pages/template2.php">
    <p ng-class="color">Content of template2.php</p>
</script>

Controller :

function Ctrl($scope) {
    $scope.templates = [{
        name: 'template1.php',
        url: './pages/template1.php'},
    {
        name: 'template2.php',
        url: './pages/template2.php'}];
    $scope.template = $scope.templates[0];

    $scope.myFunction = function() {
        $scope.color = 'red';
    }
}

http://jsfiddle.net/MfHa6/1517/

@SamTengWong i had updated my answer with example , can you check it this is helpful.?
sorry my mistake... it's now working.... the actual name of my file is customers.php... it took me an hour to notice... my bad.. but thanks for helping...

Collectives™ on Stack Overflow

angularjs ng-include pass value from controller

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related