I'm running into a very odd situation trying to display a simple scope variable inside an angularjs template. Here's the simplified template code:
<div id="Parent" data-ng-controller="MyController">
{{ScopeVariable}} <!-- Diplays Just Fine -->
<div>
... Some Buttons ...
{{ScopeVariable}} <!-- Here it displays as {{ScopeVariable}}. Why? -->
</div>
<div ng-repeat="SomeElement in SomeScopeArray">
{{ScopeVariable}} <!-- Diplays Just Fine -->
</div>
</div>
The same single scope variable displays correctly inside the controller element as well as a repeated div. But if I try to display it inside a simple div, it fails.
Related
I have a page with two tabs and in one of them I have a clickable component that is supposed to change a scope attribute that represents a class. The class content changes is working fine but it is not applying the effect of the class, just when I switch from this tab to another one and come back. Then, when I switch back it applies the CSS class changes.
<!-- Element 1 -->
<div ng-class="{ '{{scopeAttibute}}': true }">
content
</div>
<!-- Element 2 -->
<div ng-click="scopeAttibute=localAttrubute">
content
</div>
I solved it replacing the ng-class for id and the classes for IDs in my CSS style. Like this:
<div id="{{scopeAttibute}}">
content
</div>
<!-- Element 2 -->
<div ng-click="scopeAttibute=localAttrubute">
content
</div>
First you have to set scopeAttribute = true
<!-- Element 1 -->
<div ng-class="{'scopeAttibute': scopeAttibute == true}">
content
</div>
I am working on ionic project, where I need to use single modal view & conditionally call controller for it.
I am trying to do like following -
<div ng-if="!isEditMode" ng-controller="Controller1">
<div ng-if="isEditMode" ng-controller="Controller2">
<ion-content>
<!-- My view code -->
</ion-content>
</div>
</div>
here, both controller are get called(can see console in controller). but html page not get rendered just white screen appear.
If I remove controller2 then it works fine with just one controller.
I am new to AngularJS and I have seen others asking similar questions, but the answers are not working for me. Rather than hijacking those questions, I thought I would open one for myself.
I am creating a demo app -- it lists "sites" which can be added to or deleted. I am using the ng-show attribute to display the required html div while hiding the others.
Here is the back-end javascript--
var SiteMaintenanceModule = angular.module("SitesMaintenance", []);
SiteMaintenanceModule.controller("siteCtrl", diveSiteCtrlfn);
function diveSiteCtrlfn($scope) {
// initializing the sites array
$scope.sites = sites;
//initializing the Divs array
$scope.allowedDivs = ["listSiteDiv","addSiteDiv", "editSiteDiv","deleteSiteDiv"];
// setting the first div as selected. This should show the div which lists the sites
$scope.selectedDiv = $scope.allowedDivs[0];
// function to be called with the selected div is to be changed
$scope.setSelectedDiv = function ($divSelectedByUser) {
$scope.selectedDiv = $divSelectedByUser;
}
};
And here is the html
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="SitesMaintenance">
<head>
<title>List of Dive Sites</title>
<link rel="Stylesheet" href="./../zHelpers/bootstrap/css/bootstrap.css" />
<script src="./../zHelpers/angular.min.js"></script>
<script src="./sites.js"></script>
<script src="./SiteMaintenance.js"></script>
</head>
<body ng-controller="siteCtrl">
<!-- Display the list of sites based on the selectedDiv variable-->
<div id="SiteList" ng-show="{{selectedDiv == 'listSiteDiv'}}">
<h3>List of Sites</h3>
<ul ng-repeat="site in sites" ng-model="sites">
<li>{{site.site}} in {{site.location}}</li>
</ul>
</div>
<!-- Display the add site Div based on the selectedDiv variable-->
<div id="AddSite" ng-show="{{selectedDiv == 'addSiteDiv'}}">
<h3>Add New Site</h3>
<div style="display:block; margin:10px">Site: <input id="inputAddSiteName" /></div>
<div style="display:block; margin:10px">Location: <input id="inputAddSiteLocation" /></div>
</div>
<!-- Display the edit site Div based on the selectedDiv variable -->
<div id="EditSites" ng-show="{{selectedDiv == 'editSiteDiv'}}" style="display:block;margin:20px">
Site Name:<input id="InputEditSiteName" />
Site Location:<input id="InputEditSiteLocation" />
</div>
<div id="controls">
<button id="AddNewSiteButton" ng-click="setSelectedDiv('addSiteDiv')">Add Site</button>
<button id="DeleteSiteButton" ng-click="setSelectedDiv('deleteSiteDiv')">Delete Site</button>
<button id="EditSiteButton" ng-click="setSelectedDiv('editSiteDiv')">Edit Site</button>
</div>
</body>
I can set the visible div to whatever I want at the start, by changing the index in the statement "$scope.selectedDiv = $scope.allowedDivs[0];" in the JavaScript.
I change the value of $scope.selectedDiv when any of the buttons on the page are clicked, so as to change the visibility of the divs.
However, the visibility of the divs doesn't change, no matter what the value of $scope.selectedDiv is. In fact, when debugging in chrome, I see that the attribute value of ng-show for each of my divs updates dynamically to "true" or "false" and expected, but the div is still displayed -- the initially invisible divs seems to have a class="ng-hide" attribute, which never changes.
I have tried $scope.$apply() in the JavaScript but that gives errors. Any help would be greatly appreciated.
You don't need to use {{}} interpolation inside ng-show directive directive, it evaluates the expression inside a $scope of your controller directly.
ng-show="selectedDiv == 'addSiteDiv'"
ng-show="selectedDiv == 'listSiteDiv'"
ng-show="selectedDiv == 'editSiteDiv'"
I'm trying to build a directive which will display a kendo window with a kendo tab strip in its body content.
It's a component I need to be reusable since I use it a lot in my web app.
Here is the flat html representation that I want to turn into a directive
<div style="padding:20px;" kendo-window="test" id="test" k-title="hello" k-options="popupOptions">
<div kendo-tab-strip k-content-urls="[ null, null]">
<!-- tab list -->
<ul>
<li class="k-state-active">View</li>
<li>Edit</li>
</ul>
<div style="padding: 1em">
This is the view tab
</div>
<div style="padding: 1em">
This is the edit tab
</div>
</div>
</div>
1) First step is creating the directive that wraps the kendo popup and this si where I'm having an issue
So basically, my directive includes the kendo-window widget in its template and has transclude="true", since the content of the popup will different each time.
It seems "transclude" and "scope" cause some issues.
Please have a look : http://plnkr.co/edit/c7qoKlh75s8aS7fazYSo
I've the simplified following architecture:
<section ng-controller="myController">
<!-- Content -->
<button>Clic here !</button>
</section>
<aside ng-include="nav.html">
<!-- Content -->
</aside>
How can I dynamicaly change the view included into the aside tag when I clic on the button, driven by the myController controller?
Note that my controller's scope doesn't include the aside tag.
Set the ng-include to a variable on your scope.
<aside ng-include="currentTemplate">
<!-- Content -->
</aside>
add an ng-click to the button that calls a function to change this variable
<button ng-click="setTemplate()">Click here !</button>
Add the function and the variable to your controller:
$scope.currentTemplate = 'firstTemplate.html';
$scope.setTemplate = function(){
$scope.currentTemplate = 'clickedTemplate.html';
}
That should do it.
Fiddler example: http://jsfiddle.net/AU6Mr/1/