在ng-controller中使用$ scope

Question

using the following code I can't get my parent scope nor the $scope to bind.

index.html

<div ng-controller="MainCtrl">
...
   <div ng-include="sidebarbar.url"></div>
</div>

main.js

angular.module('myApp')
 .controller('MainCtrl', ['$scope', 'DataProvider', 'SidebarService', function ($scope, DataProvider, SidebarService) {
//Initialize
$scope.data= DataProvider;
...

in my index.html inside the controller I have full access to my data scope now I need to display parts of this data inside a sidebar view, SiderbarServices opens the sidebar, sets the slected ID which all works

details.html (which is the one opened by ng-include)

<div ng-controller="DetailsCtrl">
    <script type="text/javascript">
    console.log('test'); //is displayed
    console.log(data); //not defined
    console.log($parent); //not defined
    console.log(testScope); //not defined
    </script>
</div>

details.js (controller)

angular.module('myApp').controller('DetailsCtrl', ['$scope', function ($scope) {
    $scope.data= $scope.$parent.data;
    $scope.testScope = 'testing if available';

    console.log($scope); //is displayed
    console.log($scope.data); //is displayed
}]);

How can I get access to the data from inside ng-include? (I can't use views as I'm already routing)

Answer 1

use this code for details.html:

<div ng-controller="DetailsCtrl">
    <!-- <script type="text/javascript">
    console.log('test'); //is displayed
    console.log(data); //not defined
    console.log($parent); //not defined
    console.log(testScope); //not defined
    </script> -->
    <div>{{data}}</div>
</div>

and replace this code in main html:

<div ng-include="'details.html'"></div>

see plunker it is working

you have done this mistake : it should be ng-include="'details.html'" not ng-include="details.html"

and <script> tag do not work inside ng-controller .