angular show/hide div outside ng view - javascript

trying to hide/show div outside ng-view but can not access it.
main controller
var vm = this;
vm.showMyDiv = false;
html
<body ng-app="app" ng-controller="ManinCtrl as main">
<div ng-show="vm.showMyDiv">
my test div
</div>
<div class="ng-view"></div>
<body>
ng-view controller
var vm = this;
vm.hideLoader = true;
how can I access it, I tried with $scope but it does not work

You're declaring the controller like this ng-controller="ManinCtrl as main" so you need to prefix the properties with main and not vm
<div ng-show="main.showMyDiv">
Working example:
angular.module('app', []).controller('mainCtrl', function() {
var main = this;
main.showMe = false;
main.toggleShow = function() {
main.showMe = !main.showMe;
};
}).controller('ctrl', function() {
var vm = this;
vm.exampleText = "I'm inner text in the controller :)";
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="mainCtrl as main">
<div ng-show="main.showMe">HELLO!!</div>
<hr>
<div ng-controller="ctrl as vm">
<div ng-bind="vm.exampleText"></div>
<button ng-click="main.toggleShow()">Click Here</button>
</div>
</div>

Related

Why sometimes doesn't ng-init trigger $watch listener?

I execute the follow code in my app and sometimes ng-init doesn't trigger $watch. Any ideas?
HTML
<div ng-controller="MyCtrl">
<p ng-init="stages = 'coco'">{{x}}</p>
</div>
Controller
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.$watch("stages", function() {
alert($scope.stages);
});
}
No it does, according to your code you have not added ng-app anywhere.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope){
$scope.$watch("stages", function() {
alert($scope.stages);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<p ng-init="stages = 'coco'">{{x}}</p>
</div>

how to use $scope inside .on click event?

I'm very new to Angular js and am testing a few functions with a simple data-parser project (Plunkr). Right now, I'm having trouble accessing $scope variable within a jQuery on click event. I would like to keep some elements hidden until an image is clicked. While I can set ng-hide to true within the controller, $scope does not appear to work inside an on click handler. Please help.
zodiac.html
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div id="container" ng-app="myApp" ng-controller="myCtrl">
<div>
<h1>What Animal Are You?</h1>
<div id="selectPicture"></div>
</div>
<div id="zodiac" ng-hide="disappear">
<h1>Your Zodiac</h1>
<div id="your-zodiac">
</div>
<br>
<h1>Avoid these Animals</h1>
<div id="hateDiv">
</div>
<br>
<h1>These Are Your Besties</h1>
<div id="loveDiv">
</div>
</div>
<script src="scripts.js"></script>
</div>
</body>
scripts.js
function d(c) {
console.log(c)
}
var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope, $http) {
$http.get('zodiac.json').success(function(data) {
$scope.disappear = true //WORKS HERE
$scope.animalsData = data
angular.forEach($scope.animalsData, function(item) {
$('#selectPicture').prepend('<img src="' + item.picture + '" alt="' + item.animal + '">')
})
$('#selectPicture').on('click', 'img', function($scope) {
$scope.disappear = false //DOES NOT WORK HERE
$('#zodiac div').empty();
findZodiac(this.alt, "#your-zodiac", true);
})
function findZodiac(animal, e, test) {
angular.forEach($scope.animalsData, function(item) {
if (item.animal == animal) { //look for the right object 'item', when found, get the image
//item.picture
$(e).prepend('<img src="' + item.picture + '">')
if (test == true) {
loveHate(item.hate, "#hateDiv")
loveHate(item.love, "#loveDiv")
}
return
}
})
}
function loveHate(array, e) {
angular.forEach(array, function(value) { //loops through an array, get each animal
findZodiac(value, e, false)
})
}
});
})
In my opinion you should not do DOM manipulation directly when using AngularJS. Use the directives provided by AngularJS instead. Here are the template and controller code if you do so -
zodiac.html
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div id="container" ng-app="myApp" ng-controller="myCtrl">
<div>
<h1>What Animal Are You?</h1>
<div id="selectPicture">
<img ng-repeat="animal in animalsData"
ng-src="{{animal.picture}}"
alt="{{animal.animal}}"
ng-click="disappear=false; findZodiac(animal)" />
</div>
</div>
<div id="zodiac" ng-hide="disappear">
<h1>Your Zodiac</h1>
<div id="your-zodiac">
<img ng-src="{{selectedAnimal.picture}}" alt="{{selectedAnimal.animal}}" />
</div>
<br>
<h1>Avoid these Animals</h1>
<div id="hateDiv">
<img ng-repeat="animal in selectedAnimal.hate"
ng-src="{{animal.picture}}"
alt="{{animal.animal}}" />
</div>
<br>
<h1>These Are Your Besties</h1>
<div id="loveDiv">
<img ng-repeat="animal in selectedAnimal.love"
ng-src="{{animal.picture}}"
alt="{{animal.animal}}" />
</div>
</div>
<script src="scripts.js"></script>
</div>
</body>
scripts.js
var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope, $http) {
$scope.animalsData = [];
$scope.selectedAnimal = {};
$scope.disappear = true;
$scope.findZodiac = function(animal) {
$scope.selectedAnimal = animal;
};
$http.get('zodiac.json').success(function(data) {
$scope.animalsData = data;
});
});
In AngularJS $scope is a global variable for your controller, You don't need to pass it like this. directly use it as
$('#selectPicture').on('click','img',function(){
$scope.disappear=false;//this will work
$('#zodiac div').empty();
findZodiac(this.alt,"#your-zodiac",true);
})
check this corrected version
scope object only available in angular world.

angularjs nested controllers - form undefined

I have the following html structure:
<body ng-controller="checkoutController">
<div class="main clearfix" ng-controller="abroadCourseController">
//html useless information
<form name="checkout_form" ng-submit="submitForm()" novalidate>
<div validate-section="checkoutInfo" ng-show="stepOne">
//fields
<div class="confirmationBox">
<button type="button" ng-click="displayPaymentMethods()">SHOW PAYMENT METHODS</button>
</div>
</div>
<div validate-section="paymentAbroadCourseB2C" ng-show="stepTwo" >
//fields
<div class="confirmationBox">
<button type="button" ng-click="submitForm()">FINISH</button>
</div>
</div>
</form>
</div>
</body>
and the following js:
var myApp = angular.module('myApp',[]);
myApp.controller('checkoutController', function ($scope) {
$scope.submitForm = function(){
$scope.stepOne = true;
$scope.stepTwo = false;
alert($scope.checkout_form);
alert('oi');
};
});
myApp.controller('abroadCourseController', function ($scope) {
$scope.stepOne = true;
$scope.stepTwo = false;
$scope.displayPaymentMethods = function(){
$scope.stepOne = false;
$scope.stepTwo = true;
alert($scope.checkout_form);
alert('oi');
};
});
basically what I need is to have access on checkout_form through the parent controller, however, it's undefined. Is there a way to achieve that?
Here's a JSfiddle: http://jsfiddle.net/thm259o7/
The best way to deal with nested controllers in Angular is using the Controller As Syntax https://toddmotto.com/digging-into-angulars-controller-as-syntax/
Yes. Change your code like this:
myApp.controller('abroadCourseController', function ($scope) {
$scope.form.checkout_form = {}
And then change the HTML like this:
<form name="form.checkout_form" ...>
In my case, It works.

Why I can't change value using function? AngularJS

Why I can't change value using function? AngularJS
html:
<div ng-controler='TestCtrl' id='TestCtrl'>
<h1>Test: {{test.name}}</h1>
<div ng-hide='showTest'>
<div class='content'>
<p>First name: <input ng-model='firstName'></p>
<p>Last name: <input ng-model='lastName'></p>
</div>
<div jq-ui-button ng-click='doSth()'>
Do something
</div>
</div>
</div>
JS:
app.controller('TestCtrl', function ($scope) {
$scope.showTest = false;
$scope.test = {name:'Test name'};
$scope.doSth = function() {
$scope.showTest = true;
}
}
It does not work. But when I write:
<div jq-ui-button ng-click='showTest = true'>
It works.
Where is the problem?
You must write ng-controller not ng-controler. That's why your code is not used. First line in your HTML.

set a class on a div with ng-class on pageload

As in the title, I'm trying to set a class on a div on page load ( not on a click ) with angular ng-class but I have no clue how to or if it is possible. The div is wrapped in a module and controller where I was previously trying to set the variable with $scope.frontpage but it didn't work.
<div id="main" role="main" class="clearfix" data-ng-module="ValidationBoxModule" ng-controller="ValidationBoxClassController">
<div validation-id="dataValidationSummary" validation-summary ng-class="frontpage" ></div>
<asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server"></asp:ContentPlaceHolder>
</div>
angular.module("ValidationBoxModule", []).controller("ValidationBoxClassController", ["$scope", function ($scope) {
$scope.frontpage = "";
($("#main").find(".sliderBox")) ? $scope.frontpage = "frontpage" : $scope.frontpage = "";
}]);
So is there a way to do it ?
What you're trying to do is not the angular way. As in: "don't do DOM manipulation in the controller". Instead use a directive, e.g:
function Ctrl($scope) {
$scope.frontpage = false;
}
angular.module('app', ['app.directives']);
angular.module('app.directives', []).directive('isFrontpage', function () {
return {
restrict: 'A',
link: function (scope, element) {
scope.frontpage = angular.element(element).find('#main .sliderBox').length > 0;
}
};
});
with:
<body ng-controller="Ctrl" is-frontpage>
<div id="main">
<div class="sliderBox"></div>
</div>
<div
validation-id="dataValidationSummary"
validation-summary
ng-class="{frontpage: frontpage}">
</div>
</body>
demo: http://jsbin.com/unihon/4/

Categories