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>
Related
Please see below given code:
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myText"></p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: <h1>John Doe</h1>";
});
</script>
The output is: My Name is:
John Doe
How can i show the text as it is. For example: My Name is : <h1>John Doe</h1>
I want to show the HTML tags on the page.
Please use the $sce of angularjs.
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope, $sce) {
$scope.myText = $sce.trustAsHtml("My name is: <h1>John Doe</h1>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller='MyController'>
<p ng-bind-html="myText"></p>
</div>
Reference:
How to use $sce
First create a filter using $sce:
app.filter("html", ['$sce', function($sce) {
return function(input){
return $sce.trustAsHtml(input);
}
}]);
Then:
<div ng-bind-html="myText | html"></div>
Use ng-bind instead ng-bind-html
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="myText"></p>
</div>
Or simply
<p>{{myText}}</p>
I think you should use like this
in your controller
$scope.mytext="<h1>John Doe</h1>"
in you html page
<p ng-bind-html="myText"></p>
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.
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;
};
});
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
}
}
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.