I have a controller with
$scope.Id = 'something';
In html
<div ng-include="~[some path]/something.cshtml'" ng-controller="ChildController" id="#{{Id}}" ng-init="Id = Id"></div>
In generate HTML, id="#something" is correctly generated.
But in childcontroller,
$scope.Id is 'undefined'.
It looks lik ChildController is initiated before its "parent" conroller. What can I do about this?
The problem is because ng-controller & ng-include both does create a new scope which is prototypically inherited from parent.
Use dot rule while dealing with scope hierarchy/inheritance.
$scope.data = {Id :'something' }
On html you need to use it like
{{data.Id}}
Demo Here
Edit
You could not load .cshtml file form its path you should have to load it from the ASP.NET MVC controller's action because it can have C# content that needs to parse through C# view engine before rendering it on view.
Related
I don't want to hardcode views and controllers in the normal way by using the $routeProvider configuration.
Basically I want to subsribe to the routechanged event, call some logic on the server providing the current route, and get the appropriate view / controller returned as json ( as a promise ), and then have it compiled / displayed inside the main section of the app.
It seems like a trivial problem, but I haven't found a solution yet.
I've tried replacing the ng-view with ng-include, but i'm not able to dynamically change the ng-controller on it.
I've tried creating a custom directive which optionally wraps the ng-include in a div with ng-controller if it is provided, but since this executes inside template function, i'm not able to resolve the controller name, because the template function does not have access to scope
If any one can show me the path, it would be greatly appreciated.
I've ended up doing this in my controller, which seems to work:
function loadPage(page) {
var container = $("#main");
var element = $("<div>");
var scope = $rootScope.$new();
server.loadViewTemplate(page.view).then(function(template) {
element.html(template);
container.html(element);
if (page.controller) {
var templateController = $controller(page.controller, { $scope: scope });
element.children().data('$ngControllerController', templateController);
}
$compile(element)(scope);
});
}
I'm just learning Angular and have a very basic app set up. When rendering some data via the templateUrl property of a route, what would be the best way to include a sub-controller in the returned template? For example, including a "createOrEditItem" template at the bottom of a "viewItem" template so that the "createOrEditItem" can be reused on its own later?
I've tried putting a div in the template with its ng-controller attribute set to a controller name that I've defined at the app level, but it's not being activated. Should this be done with a directive instead to make it instantiate when the master controller has its contents set, or am I missing something more fundamental?
yes, as mentioned in the later part of the question, you should be using a directive. Or, if using AngularJS >= v1.5, component should be the choice because they are pluggable and works well with nesting too.
Note that for the route also, you can directly use a component like this:
var myMod = angular.module('myMod', ['ngRoute']);
myMod.component('home', {
template: '<h1>Home</h1><p>Hello, {{ $ctrl.user.name }} !</p>',
// ^^^^ other components can be used here
controller: function() {
this.user = {name: 'world'};
}
});
myMod.config(function($routeProvider) {
$routeProvider.when('/', {
template: '<home></home>'
});
});
Now, as the comment suggests, you can freely use other components in the template of home component.
Hope this helps a bit!
A directive can be used.
Another option is to use a seperate view/route. So when you add a ui-view tag, you could define your view and route.
This is explained here:
https://scotch.io/tutorials/angular-routing-using-ui-router
having same nested directives:
<div mydir="a">
<div mydir="b">
</div>
</div>
if mydir requires ?^mydir it always get itself's controller.
test_plunk
is it possible to access parent's controller?
According the angular documentation on jqLite, you can call controller() to retrieve the controller for any given element:
controller(name) - retrieves the controller of the current element or its parent.
By default retrieves controller associated with the ngController directive.
If name is provided as camelCase directive name, then the controller for this
directive will be retrieved (e.g. 'ngModel').
Within your link function, you can retrieve the parent controller by calling controller() on the parent element and passing in the name of the directive:
var parentCtrl = iElement.parent().controller('mydir');
$scope.$parent.a;
shall give you a
$scope is the scope injected by angular
$parent is a keyword reference to the parent scope from any scope in angular.
Yes this is JavaScript, and as was asked in the question, AngularJS powered Javascript
I'm pretty sure it's something stupid again. I'm learning angularjs so I don't get the full scope yet but I'm getting there. I tried everything and really searched for anything I could find but nothing seemed to work.
I'm trying to do a ng-class="..." in my layout file but the expression is set in my controller but somehow it's not rendered. It is rendered when I put it in my ng-view file. I get that he only renders part of the file but I want him to render the ng-class on ng-view as well. Is this possible or is it easier to just put in a div inside the partial html file.
Simple html file
<body>
<ng-view ng-class="{ 'splash': splash=='splash' }"></ng-view>
</body>
My controller
angular.module('xxx.splash')
.controller('IndexCtrl', function($scope, $rootScope, config) {
$rootScope.splash = 'splash';
$scope.login = function(e) {
alert('Soon. How soon? Very soon.');
}
});
When you define a variable in the root scope, you can't access it in the same way as you define it in the local scope. $rootScope variables can be accessible in the AngularJS templates using $root.<variableName>, so your HTML file should be changed to this:
<body>
<ng-view ng-class="{ 'splash': $root.splash=='splash' }"></ng-view>
</body>
You can see the diffrence of $scope and $rootScope in this demo
I don't want to use templateUrl, due to the way the app is currently structured.
I want to be able to dynamically load a controller into my ng-controller template.
I would think there would be a way to pass variable to ng-controller as you can see
I'm passing controller to ng-controller ignorantly hoping the name controller is assigned
to index_projects.
Routing
config = (http,route) ->
http.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
http.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"
route_to = (path,controller)->
route.when path, {controller: controller}
route_to '/projects', 'index_projects'
Template
.projects_wrap{ ng:{controller:'controller'} }
%h2
%span All Projects
.light_button{ ng:{click: 'pop.new()'} }
%span.light_plus
Add Project
Look at this:
http://www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm
I am successfully freed of using ngView with this article.