I have this html:
<div ng-controller="MyCtrl">
<div ng-view></div>
</div>
<script type="text/ng-template" id="/a">
// SomeHtml with Angular templates
</script>
<script type="text/ng-template" id="/b">
// SomeHtml with Angular templates
</script>
And:
angular.module('ngView', [], function($routeProvider, $locationProvider) {
$routeProvider.when('/a', {
templateUrl: '/a',
controller: MyCtrl
});
$routeProvider.when('/b', {
templateUrl: '/b',
controller: MyCtrl
});
});
The controller "MyCtrl" has some bootstrap code that is invoked when the html is first loaded, this bootstrap code sets up some state that should be used by both "/a" and "/b" template. Templates "/a" and "/b" will present the data obtained during the bootstrap to render in different ways.
I'd like to not have a controller and still be able to access MyCtrl scope from my templates.
I would remove the wrapping controller, and have my routes each have their own controller. If these controllers need shared data then I would add a dedicated object that holds these data to the controllers' dependency lists. Here is an example: http://stackoverflow.com/a/9407953/410102
Beside the Angular website says that you should point some controller you are not required to do it, and if the tag with the ng-view
attribute is wrapped into another tag that has a ng-controller
then the template rendered will be able to access the parent scope as usual.
Your template controller will have a parent controller (your so called wrapping controller), which it inherits. So you can execute functions and access properties from your wrapping controller.
function TemplateAController($scope) {
...
}
function WrappingController($scope) {
$scope.execute = function() {
...
}
...
}
In your template:
<a ng-click="execute()">Execute</a>