I am trying to bind the expression used in a ng-show attribute to the result of a jQuery selector. The reason for this is that I need to hide/show an element based on the presence of another element (ng-view)
The markup I have currently is
<div ng-view id="partialView"></div>
<div ng-show="$('#partialView').length === 0">
<h1>MAIN CONTENT</h1>
</div>
and when this is rendered I get:
<!-- ngView: -->
<div ng-show="$('#partialView').length === 0" class="ng-hide">...</div>
when the ng-view is not provided, or
<div ng-view id="partialView">...</div>
<div ng-show="$('#partialView').length === 0" class="ng-hide">...</div>
the expression in the ng-show is not being evaluated (or maybe simply not re-evaluated).
My question is
Is this the correct way to bind the ng-show to the presence of another element in the DOM, and if it is the correct way to do it, what is wrong with my syntax that is stopping it from working?
ng-show work with scope that you defined in controller.
you should define scope with jQuery or scope.
like
$scope.partialView=0 //or any thing that you want.
<div ng-show="partialView === 0" class="ng-hide">...</div>
Your view does not know what $() is, in your controller assign the jquery $ to $scope element e.g. $scope['$'] = $
Thanks to the help of #basant-rules and #martin-glennon I moved the logic into the controller, so now my controller has a function defined on it's scope:
var LandingPageController = function ($scope) {
$scope.noPartialView = function () {
return $('#partialView').length ===0;
};
};
and the view looks like:
<div ng-view id="partialView"></div>
<div ng-show="noPartialView()">
<h1>Main Content</h1>
</div>
Related
I have the following ng-repeat that gives an element a className based on whether it is even or odd...
<div ng-click="displayHTML(content)" ng-class-odd="'title'" ng-class-even="'html'" ng-repeat="content in name.name">
{{content}}
</div>
On ng-click I am calling displayHTML() and passing a parameter content so that only that particular div that is clicked calls the function.
However on ng-click I'm attempting to see whether the clicked element is ng-class-odd or ng-class-even and I want the function to only be called if the element is ng-class-odd.
But I do not know an easy way to do this. Is there an easy "angular" way of doing it. If not, what should I put here...
$scope.displayHTML = function(obj){
////
}
ngRepeat exposes several local variables to the scope, specifically $even and $odd. Just use those:
<div ng-click="displayHTML(content, $even)" ng-class-odd="'title'" ng-class-even="'html'" ng-repeat="content in name.name">
{{content}}
</div>
js:
$scope.displayHTML = function(obj, $even) {
if($even) {/* even code*/}
else {/* odd code */}
}
I've got a template with two kind of article-container: Viewer and Editor:
<article ng-if="!editor" ng-controller="article">
<div>Some content</div>
</article>
<article ng-if="editor" ng-controller="article">
<div mySharedScope></div>
</article>
While clicking the button the user can switch between those two container:
<button ng-click="editor = !editor" ng-bind="editor ? 'Abort' : 'Edit'"></button>
Now I want to create a directive on the second container. So this is what I did:
app.directive('mySharedScope', function () {
return {
template: 'New content'
};
});
But something is missing, as this doesn't work.
I want to use a directive to do some DOM mainpulation link: function ($scope, element, attrs) { }
Two things, first is that the directive mySharedScope will transform in it's directive definition from camel case
<div mySharedScope></div>
to a dashes like so
<div my-shared-scope></div>
After you switch that out, you'll need to make sure you're translcuding content nested inside of your first directive (article), and placing the ng-transclude directive inside of its template.
see docs for this on angular website
as a basic implementation of this, i've created a fiddle with the two of your two directives that appropriately switch when a button is triggered. The content is transcluded here, so feel free to cherry pick what you need from it.
https://jsfiddle.net/wvty8rpc/2/
A directive named 'mySharedScope' translates to attribute 'my-shared-scope':
<article ng-if="editor" ng-controller="article">
<div my-shared-scope></div>
</article>
I am trying to initialize $scope.selectedModel to model1with ng-init. However, the following HTML fails to accomplish this:
<div class="productImage">
<div class="imageGallery" ng-init="selectedModel='model1'">
<div ng-repeat="mod in pTab" ng-if="modelIsActive(mod)">
<div ng-repeat="img in mod.galleryImages">
<img class="overviewProductImage" ng-src="{{img.image}}" ng-if="productImageIsActive(img, $index)"/>
</div>
</div>
</div>
</div>
And here's the modelIsActive method that uses selectedModel:
$scope.modelIsActive = function (tab) {
return tab.model== $scope.selectedModel;
}
Eventually I will want to use ng-init="selectedModel= mod.model" but when that didn't work I substituted the simple string 'model1' and found it still wasn't initializing selectedModelto that string.
How can I use ng-init to set $scope.selectedModel? Or should I be using something else? Do I need to use $watch or something similar?
If you can, it is better to initialize your selectedModel in your controller rather than in the HTML using ng-init: this directive can have exepected behaviors.
If you really need to though, you either need to at least define $scope.selectedModel in your controller and then set a value in the ng-init, or use an object instead of directly a value, such as
<div ng-init="model.selectedModel = 'model11'">
(but you'll still need to initialize $scope.model in your controller)
please put your ng-if into the inner of repeat:
<div ng-repeat="mod in pTab">
<div ng-repeat="img in mod.galleryImages" ng-if="modelIsActive(mod)">
New to Angular and need some assistance.
I have a block of HTML content that will be coming from a database that will contain a group of widgets. These are simple widgets that will essentially render out various elements, but for the purposes of this question we'll assume they're all basic HTML inside.
Those widgets are included in an unpredictable way, so my first thought was to use directives to render the HTML. So, we'd have something like:
<div widget data="This is the content."></div>
So I've got a directive that will place the value of data into the div. Easy enough!
Now, how would I go about nesting those widgets? So, how would I get something like:
<div widget data="Welcome! ">
<div widget data="This is some inside content."></div>
</div>
to render out:
Welcome! This is some inside content.
... because the issue I'm noticing is that if I place anything inside the directive HTML, it essentially gets ignored since it gets replaced with its own result (thus only echoing out Welcome!).
I realize I may be going the wrong direction on this in the first place, so any insight would be greatly appreciated. Thanks so much!
This is where you need to use the transclusion feature of the directive combined with ng-transclude directive.
Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.
Any existing content of the element that this directive is placed on will be removed before the transcluded content is inserted.
A very basic version of transclusion of content based on your example might look something like this:
.directive('widget', function() {
return {
transclude: true,//Set transclusion
template: '{{text}} <section ng-transclude></section>', <!-- set where you need to present the transcluded content -->
scope: {
text: "#"
}
}
});
Demo
angular.module('app', []).directive('widget', function() {
return {
transclude: true,
template: '{{text}} <section ng-transclude></section>',
scope: {
text: "#"
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<span widget data-text="Welcome! ">
<div widget data-text="This is some inside content.">
<span widget data-text="This is some inside inside content."></span>
</div>
</span>
</div>
I have a main file which includes a file inside a subfolder using ng-include, like this,
<p ng-include=" 'activity/act01/' "></p>
where the ng-include value will change dynamically
then, how can i get current value of ng-include.
ng-include binds to an expression. This is why your example requires single quotes. It wants an expression returning a string. This can be function returning a string, a variable, or a literal string. Because of this, it is easy to bind ng-include to a scope variable.
Here is an example of how to do it:
function TestCtrl($scope) {
$scope.actPage = 'activity/act01/';
$scope.goToActTwo = function(){
$scope.actPage = 'activity/act02';
};
}
And the HTML:
<div ng-app ng-controller="TestCtrl">
<div ng-include="actPage"></div>
<button ng-click="goToActTwo()">Change Act</button>
</div>