The idea is to create a function that triggers a pop up when clicking on the word.
This is what I have done so far:
HTML
<div class="contenu" >
<div class="box1">
MyRhoom
<div class="bordered" ng-show="collapsedd">I am description</div>
</div>
Js controller
angular.module('starter.toolsController', ['ionic'])
.controller('toolsCtrl', function ($scope){
$scope.collapsedd="false";
$scope.toggle=function()
{
$scope.collapsedd=!$scope.collapsedd;
};
});
But I get this:
Meaning that the pop up is fired already!
How to fix this?
I think there is no big problem with your code. I've just replaced $scope.collapsedd = 'false' with $scope.collapsedd = false and it has been working.
HTML
<div class="contenu" ng-controller="toolsCtrl">
<div class="box1">
MyRhoom
<div class="bordered" ng-show="collapsedd">I am description</div>
</div>
</div>
JS
var myApp = angular.module('myApp', []);
myApp.controller('toolsCtrl', function($scope) {
$scope.collapsedd = false;
$scope.toggle = function() {
$scope.collapsedd = !$scope.collapsedd;
};
});
Related
I'm new at angularjs and i'm having some serious problems lol...
I've something like this that is working so i don't know whats the problem with this code.. can you help me pls?
Here is it: Basicly the scope.create does not work.. it doesn't even enter in the function..
<!DOCTYPE html>
<html>`enter code here`
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.6.5/angular-resource.min.js"></script>
<script>
var app = angular.module('myAppDevice', ['ngResource']);
app.controller('deviceCtrl', ['$scope', '$resource', function($scope,$resource) {
$scope.create = function(a){
console.log("ola");
Device = $resource(
"http://localhost:8080/userapi/postdevice/:userId/:deviceType",
{},
{save: {method:'POST',isArray:false, params: {userId: '#userId',deviceType:'#deviceType'}}}
);
$scope.Message = Device.save({externalId: $scope.deviceForm.userId, deviceType:a});
$scope.deviceForm.userId = "";
};
}]);
function func(){
console.log("ole");
}
app.controller('deviceCtrl', function($scope) {
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
</script>
</head>
<body ng-app="myAppDevice">
<div ng-controller="deviceCtrl">
<form name="deviceForm">
<div class="form-group">
<img id="device" alt="sensor"
src="http://www.solucoesindustriais.com.br/images/produtos/imagens_10048/p_sensor-de-movimento-para-porta-12.jpg"
width="300" height="150" ng-click="toggle()" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div class="form-group">
<p ng-show="myVar">
userId: <input ng-model="deviceForm.userId" type=text>
</p>
</div>
<div class="btn-wrapper">
<div class="row-gutter-5">
<div class="col-md-4 col-xs-6 col-sm-6">
<button class="btn btn_blue" type="button"
data-ng-click="create(lamp)" id="Create">Create</button>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Thanks
[EDIT] Thanks guys!! it was solved by removing the controller as you said.. i was starting to be desperate !!
you are duplicating your controller by calling twice "deviceCtrl". Keep it once and try. As the code compiles and execute the latest deviceCtrl will get called and hence the $scope.create() not getting called.
Just remove Second deviceCtrl
app.controller('deviceCtrl', function($scope) {
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
Here is an working example.
I have tried many different things to try to get this to work.
I have read:
ng-click not firing in AngularJS while onclick does
AngularJS : ng-click not working
and a lot more
Html:
<div ng-controller="testApp">
<div id="bla">
<button ng-click="obey('bla')">Close</button>
<h4>Bla bla bla</h4>
</div>
</div>
JS:
var testApp = angular.module('testApp', []);
testApp.controller('testController', function($scope) {
$scope.obey = function test(id) {
$("#" + id).fadeOut("slow", function() {
this.remove()
});
};
});
For some reason the div does not fade out at all.
You specified your app name in controller. check this.
var testApp = angular.module('testApp', []);
testApp.controller('testController', function($scope) {
$scope.obey = function test(id) {
$scope.hide= !$scope.hide;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testController">
<div id="bla">
<button ng-click="obey('bla')">Close</button>
<h4 ng-hide="hide">Bla bla bla</h4>
</div>
</div>
Seems to me it's something wrong with name of your controller. Try this:
<div ng-app="testApp" ng-controller="testController">
<div id="bla">
<button ng-click="obey('bla')">Close</button>
<h4>Bla bla bla</h4>
</div>
you can use a ng-show or ng-hide in this case
<div ng-controller="testApp">
<div id="bla">
<button ng-click="obey()">Close</button>
<h4 ng-show="viewDiv">Bla bla bla</h4>
</div>
</div>
var testApp = angular.module('testApp', []);
testApp.controller('testController', function($scope) {
$scope.viewDiv = true;
$scope.obey = function test(id) {
$scope.viewDiv = !$scope.viewDiv;
};
});
for angular animation - refer LINK
specified proper "ng-app" and "ng-controller" name
HTML ie.
<body ng-app="testApp">
<div ng-controller="testController">
<div id="bla">
<button ng-click="obey('bla')">Close</button>
<h4>Bla bla bla</h4>
</div>
</div>
<body>
When clicking module class it shows emptylabel. but i cant hide the module class.
<div id="b" class="tab-pane fade in active" >
<div class="secondrow">
<div ng-show="divshow">
<label class="emptylabel"> <input type="button" value="back" class="backbutton" ng-click="hidediv()"></label>
</div>
<div class="module">
<a href="#/b" class="{{module}}" ng-click="showdiv()">
<div class="col-sm-4"><label>Jawaharlal Nehru</label></div>
<div class="col-sm-1"><label>111111</label></div>
<div class="col-sm-2"><label>2222222</label></div>
<div class="col-sm-3"><label>3333333</label></div>
</a>
</div>
Controller:
app.controller('myController', ['$scope', function($scope) {
$scope.showdiv = function () {
$scope.divshow = true;
$scope.module = false;
}
// Hide Div
$scope.hidediv = function () {
$scope.divshow = false;
}
}]);
I'm not sure if I understand your question correctly. If you want to toggle between the emptylabel and module, the you can use ng-show for both of them, based on the divshow variable:
<div ng-show="divshow">
<label class="emptylabel">
<input type="button" value="back" class="backbutton" ng-click="hidediv()">
</label>
</div>
<div class="module" ng-show="!divshow">
<a href="#/b" class="{{module}}" ng-click="showdiv()">
...
</a>
</div>
controller:
app.controller('myController', ['$scope', function($scope) {
$scope.showdiv = function () {
$scope.divshow = true;
}
$scope.hidediv = function () {
$scope.divshow = false;
}
}]);
What does your ng-controller declaration in the HTML look like? For example mine usually look something like this, with the capture variable 'vm':
<div data-ng-controller="FooController as vm">
<div>
<span data-ng-click="vm.showDiv()"></span>
</div>
</div>
Inside your controller:
function FooController() {
var vm = this;
vm.showDiv = showDiv;
function showdiv() {
// Your code here
}
}
The feature I'm trying to implement is a toggle view source button so the user can view the source of a given element then copy the text.
Using the ngRoute module, my views are coming through ng-view:
<div id="code" ng-view=""></div>
I would like the HTML to be output to:
<div id="html-text-output"></div>
I've tried using the $sanitize function but I'm not sure it is appropriate for my solution. Below is the code currently in my controller:
angular.module('App')
.controller('outputHtmlCtrl', function ($scope, $element, $sanitize) {
$scope.isOutputToggled = true;
var sanatizedHtml = $sanitize($('#email-frame-code').html());
$scope.toggleHtmlOutput = function() {
$scope.isOutputToggled = $scope.isOutputToggled === false ? true: false;
$('#html-text-output').append("<div>"+"'"+sanatizedHtml+"'"+"</div>");
}
});
My markup is below:
<div id="email-frame-code__container" ng-controller="outputHtmlCtrl">
<div class="browser-header">
<span class="browser-header__icon" ng-click="toggleHtmlOutput()"></span>
</div>
<div id="email-frame-code" ng-class="{closed: isOutputToggled}">
<div id="html-text-output"></div>
<div id="code" ng-view=""></div>
</div>
</div>
My end goal for this is like the 'Fancy Version' here: https://css-tricks.com/examples/ViewSourceButton/
But on a target element, not the whole page.
I have created two directives and included them in my html. However, only the first one executes and nothing after it.
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div directive-one=""/>
<div directive-two=""/>
<div> Hello I am {{name}} and I am {{age}} years old!</div>
</div>
<script type="text/ng-template" id="myTemplate.html">
<div>Name: <input type='text' ng-model='name'/></div>
</script>
</div>
Javascript:
var app = angular.module('myApp', []);
app.controller('MyCtrl', function ($scope) {
$scope.name = "Jason";
$scope.age = "20";
});
app.directive('directiveOne', function () {
return {
replace: true,
template: "<div>Age: <input type = 'text' id = 'age' ng-model='age'>
</input></div>"
}
});
app.directive('directiveTwo', function () {
return {
replace: true,
templateUrl: "myTemplate.html"
}
});
Here is the fiddle: DEMO
Can't figure out what the issue is. Any help is appreciated.
You have to close your div tags with the directives in them and you don't need the ="" after either.
<div directive-one></div>
<div directive-two></div>
Here's an updated fiddle with it working.