Having a bit of a more complicated issue, but one factor that I really want to know is this..
Does declaring a controller inside (second method) a partial which is not instantiated (yet) increase the efficiency of the app compared to declaring the controller in my index file (first method)
I would think it would be more efficient by having the ng-controller's inside the partials as if they would be outside, they would all have to be instantiated at once at the start as well as keeping more memory in usage at all times.
in terms of memory allocation, I tested both methods and both seem to give me about the same amount of memory used.
First method:
in "index.html:"
<div ng-controller="mainController as mainCtrl">
<div ng-switch="mainCtrl.currentPage">
<div ng-controller='browsePageController as browseCtrl'>
<div ng-switch-when="browsePage">
<browse-page></browse-page>
</div>
</div>
<div ng-controller='otherController as otherCtrl'>
<div ng-switch-when="homePage">
<other-page></other-page>
</div>
</div>
</div>
</div>
Second method:
<div ng-controller="mainController as mainCtrl">
<div ng-switch="mainCtrl.currentState">
<div ng-switch-when="browsePage">
<browse-page></browse-page>
</div>
<div ng-switch-when="otherPage">
<other-page></other-page>
</div>
</div>
</div>
in "homePage.html":
<div ng-controller='homePageController as homeCtrl'>
......
</div>
Another sidequestion is..
Every time a page changes (say from browsePage to otherPage), the controller in the otherPage gets initialized (if using the second method). This actually messes with my data somewhat. Any design pattern suggestions that would help me out better ? thanks
got rid of the switches with views - used ui-router and stateProvider which proved to be quite useful in managing many issues of an angularjs app
Related
I have a problem in which I need to hide results until the user has started typing into the search bar. I am using a DotNetNuke plugin, and therefore did not build this module myself. The scopes I believe I need to use are for '.angrid-search' which has a method that returns the search terms, which it will then use in order to decide if the 'angrid-grid' will be displayed. This is the code I have tried thus far, as well as many different similar variations.
if (angular.element($('.angrid-search')).searchTerms === undefined){
angular.element($('.angrid-grid')).hide();
}
angular.element($('.angrid-search')) comes back with undefined, and returns the search terms once something is typed in. It seems to me that the problem is in the second line, in which I try to hide the element.
I am extremely new to Angular (this is pretty much my first real problem), so explaining in layman's terms would be greatly appreciated, especially since I need to learn just as importantly as I need to solve this problem.
Here is the basic DOM
<div class="angrid">
<div class="angrid-search">
</div>
<div class="angrid-grid-view">
<div class="angrid-grid">
</div>
</div>
</div>
There is a bunch of stuff inbetween, but these are the relavent scopes and I did not want to cpypst the inspector window. My main question is: Is the .hide() method supposed to work in this type of sitation?
You could try something like.
<div class="angrid">
<div class="angrid-search">
</div>
<div class="angrid-grid-view">
<div class="angrid-grid" ng-hide="hidegrid">
</div>
</div>
and in js
if (angular.element($('.angrid-search')).searchTerms === undefined){
angular.element($('.angrid-grid')).hidegrid = true;
}
Yes. It's supposed to work. Here's a demo:
angular.module('demo', [])
.controller('demoCtrl', ['$scope',
function($scope) {
$scope.testFn = function() {
if (angular.element($('.angrid-search')).searchTerms === undefined) {
angular.element($('.angrid-grid')).hide();
}
};
}
]);
<script data-require="jquery#1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script data-require="angular.js#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<div ng-app="demo" ng-controller="demoCtrl">
<div class="angrid">
<div class="angrid-search"></div>
<div class="angrid-grid-view">
<div class="angrid-grid">Grid!</div>
</div>
</div>
<button ng-click="testFn()">the code will work...</button>
</div>
By the way, you mention:
angular.element($('.angrid-search')) comes back with undefined
If it does, then obviously hiding things will not work. You should probably ask another question with enough information to reproduce that problem scenario from scratch, so we can help without resorting to guessing.
I have a controller that basically assigns text to a $scope variable like this;
$scope['Model'] = ["markdown text 1", "markdown text 2"];
And then I try to use marked on it within a view, like this;
<div ng-repeat="n in Model">
<div marked="n"></div>
</div>
or
<div marked>
<div ng-repeat="n in Model">
{{n}}
</div>
</div>
I just get {{n}} as the output, verbatim. Marked never runs, never does anything to it. I'm completely baffled. I know the text is fine.
I have tried all of the examples and nothing seems to work. It does work if I put in static, hard-coded text between <marked> directives - but nothing dynamic.
The only way I've been able to make anything work is to forcefully use the marked(n) function within the controller - which is far less than ideal and certainly not what I'm wanting to do.
After a lot of trying, I think that the way angular-ui-router is involved may play a part. Here is the HTML structure;
index.html
<div class="content-body">
<ui-view />
</div>
content.html
<ui-view />
entry.html
<div ng-repeat="m in model">
<div marked="m"></div>
</div>
I think I've got it.
<div ng-repeat="m in model">
<div marked="m"></div>
</div>
Works as per this fiddle: https://jsfiddle.net/jorgthuijls/q244srfh/
See, ng-repeat creates its own scope. So, you can bind the m variable to the marked directive.
I got it to work with angular-ui-router too: https://jsfiddle.net/jorgthuijls/ck8by0ze/
I have small text portions like
<div>
<h4>Why Register?</h4>
<p>As candidate...</p>
</div>
opposed to
<div>
<h4>Why Register?</h4>
<p>As company...</p>
</div>
Based on a variable in my controller I insert the correct partial with:
<div ng-switch on="role">
<div ng-switch-when="candidate">
<div ng-include="'candidate.html'"></div>
</div>
<div ng-switch-when="company">
<div ng-include="'company.html'"></div>
</div>
<div ng-switch-default>
<div ng-include="'candidate.html'"></div>
</div>
</div>
This does the job but it looks awful. Is there any way I could do it better?
You could always hold your string vars in javascript or external json file and use markup which is tied to a model like this:
<div ng-controller="something">
<h4>Why Register?</h4>
<p>{{who}}</p>
</div>
and then inside your "something" controller provide code:
if(role == "company")
$scope.who = "As company...";
else
$Scope.who = "As candidate...";
If you have many places in code that use such feature, you could consider holding variables in external json and then reading them in javascript/controller.
You can use:
<div ng-include="(role || 'candidate') + '.html'"></div>
If the parts are not that big you can put them all up there and use ng-show to filter which gets actually shown. This takes up the least markup.
<h4>Why register?</h4>
<p ng-show="isCompany">Company targeted content...</p>
<p ng-show="isCandidate">Candidate targeted content...</p>
I want to have a login view outside ng-view, but is it even possible with angular.js? couldnt find any examples of folowing on the internet. Example is descibed below.
<div class="container">
<div class="header">
<div class="loginView"> my huge login view</div>
</div>
</div>
<div class="container">
<div ng-view></div>
</div>
Yes. Assign a controller to the loginView and treat it like any other view.
ng-view is just used when using the $routeProvider to define routes.
This is perfectly valid. ngView is used to complement the router. This means it is just a directive as any other. You can put anything around it.
It sounds like you want something like this: Live demo here (click).
<div class="container">
<div class="header">
<div class="loginView" ng-include="'login.html'"></div>
</div>
</div>
You could also include your file from a $scope property like this:
$scope.foo = 'login.html';
<div ng-include="foo"></div>
updated: made a smaller poc, in plunkr to show the problem without the entire application around it.
see it here
issue: data-ng-switch works on inline content, but does not remove the previous element when switching using external templates via data-ng-include.
works
<div data-ng-switch="view">
<div data-ng-switch-when="template1">content 1</div>
<div data-ng-switch-when="template2">content 2</div>
</div>
doesn't work
<div data-ng-switch="view">
<div data-ng-switch-when="template1" data-ng-include="'template1.html'"></div>
<div data-ng-switch-when="template2" data-ng-include="'template2.html'"></div>
</div>
Best solution I currently found can be seen in the plunkr
you basically cannot use ng-include on the same dom level as the ng-switch anymore. The same goes for other logical directives like ng-show ng-hide...
adding the ng-include on a child node of the ng-switch-when element works:
<div data-ng-switch="view">
<div data-ng-switch-when="template1">
<div data-ng-include="'template1.html'"></div>
</div>
<div data-ng-switch-when="template2">
<div data-ng-include="'template2.html'"></div>
</div>
</div>
update
Should be fixed in .rc3!
This was confirmed as a bug in the angular rc2 version (confirmation in this google group discussion).
The actual bugticket can be found here.