when I click the "Refresh" or the src,I want to only refresh the following "div" and another div ,not the whole html.
How do use angularjs to do?
<div>
<img alt="Refresh" src="/Captcha/[[.CaptchaId]]/" /><span>Refresh</span>
</div>
Thanks!
You bind your img src to your scope and add a ng-click handler to your img tag to handle click event, and change the binded value accordingly
angular.module("myApp", [])
.controller("MainCtrl", function ($scope) {
$scope.url = "old.png";
$scope.refresh = function() {
$scope.url = "new.png";
};
})
and your html:
<img src="{{url}}" ng-click="refresh()">Refresh</img>
You can try to prevent default handler:
html:
<img src="{{url}}" ng-click="saveUser($event)">Refresh</img>
js:
$scope.saveUser = function (event) {
event.preventDefault();
// your code
}
Related
basically i want to change the attribute value based on the button i clicked,
these are the two buttons
<button ng-click="fn(a)"></button>
<button ng-click="fn(b)"></button>
and then i have a prebuilt directive who takes value as input,
<div directive-name="" id="abc"></div>
if i click on first button,i want the value of directive based on button clicked.
What i did earlier;
$scope.go = function(data){
if(data==a){
var b = document.querySelector( 'div' );
b.setAttribute("directive-name","value");
}
else{}
}
here the problem is that it is selecting the first div of document and setting attribute value for that.
I also tried to pass it with id like
var b = angular.element(document.querySelector('#abc'));
I also saw some custom directives to do so, but they are not working
AngularJS DOM Manipulation through Directives
If possible provide me a demo in plunkr or fiddle
and also if i want to change css property of div based on button clicked
Thanks in advance
You can do it like this.
Assign the directive-name value to a $scope.variable and then use variable as the value in HTML.
HTML - 1:
<button ng-click="go(a)"></button>
<button ng-click="go(b)"></button>
HTML - 2:
<div directive-name="{{directive}}" id="abc"></div>
JS:
$scope.go = function(data){
if(data==a){
$scope.directive = "directive-1";
}else if(data==b){
$scope.directive = "directive-2";
}
}
To assign class name to div you can define other $scope.classVar and then use that in HTML like below:
<div directive-name="{{directive}}" id="abc" ng-class="classVar"></div>
I hope this will solve your problem.
This should work, (you had some errors in your code):-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.fn = function(data,id) {
if (data == 'a') {
var b = document.querySelector('#'+id);
b.setAttribute("directive-name", "value");
} else {
}
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div directive-name="" id="abc"></div>
<button ng-click="fn('a','abc')">A</button>
</div>
"Basically I want to change the attribute value based on the button I clicked."
You can do this by changing the attribute value the angular way, referencing a property of $scope or the controller instance in your template. When clicking a button, set the variable to the value you require to be passed to your directive.
Note: When you pass a value into your ngClick directive, you need to pass it as a string unless a and b are declared as properties of $scope.
Here's a basic example:
// app.js
(function() {
'use strict';
angular.module('app', []);
})();
// main.controller.js
(function() {
'use strict';
angular.module('app').controller('MainController', MainController);
MainController.$inject = ['$scope'];
function MainController($scope) {
$scope.fn = fn;
function fn(data) {
// set the value so it's accessable in the view
// therefore we can pass it into our directive
$scope.myVar = data;
}
}
})();
// directive-name.directive.js
(function() {
'use strict';
angular.module('app').directive('directiveName', directiveNameDirective);
function directiveNameDirective() {
return {
restrict: 'A',
scope: {
directiveName: '='
},
template: '<span>directiveName: {{ directiveName }}</span>'
};
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainController as MainCtrl">
<!-- here we pass a and b as strings otherwise they get evaluated as variables -->
<button ng-click="fn('a')">Set a</button>
<button ng-click="fn('b')">Set b</button>
<hr>
<!-- here we pass myVar which is declared as a property of $scope when the fn function is called -->
<div directive-name="myVar" id="abc"></div>
<hr> myVar: {{ myVar }}
</div>
</div>
I am using ngDialog module for angularjs. My problem is that when I make a action at modal windows, I hope that my interface change depending of scope changes, but ng-if or ng-show or simply print variable not update. If I print in console I can see the rules values, but the interface not update.
My Code:
controller:
export class NewEntityController {
constructor($scope, $routeParams, $location, ngDialog) {
"ngInject";
// initialize scope
$scope.ruleForm = false;
$scope.rules = [];
$scope.showRulesSetting = function()
{
ngDialog.open({ template: 'views/modal-windows/rules.html', className: 'ngdialog-theme-default', scope: $scope });
};
$scope.addRule = function()
{
$scope.rules.push('rule-'+new Date().getTime());
console.log($scope.rules);
}
}}
Normal Page View:
<span style="color: blue;" ng-click="showRulesSetting()"><i class="fa fa-cog" aria-hidden="true"></i> Advance rules</span>
Modal Windows View:
<div>
<button ng-click="addRule()">Add</button>
</div>
<div id="ruleslist" ng-if="rules.length > 0">
{{rules}}
</div>
When I click in "Add" button I can see rules value in console, but in interface div with id="ruleslits" never show and the result of {{rules}} is always []. I test with $scope.$apply() but whithout result.
I have a controller called ProductCtrl and Product.html page. I want to mention inline ng-click in Product.html page. But, inline ng-click to different controller is not working. My code is as follows,
var app = angular.module('myapp', []);
app.controller('ProductdetailsCtrl', function($scope) {
$scope.showMe = function() {
alert("button clicked");
}
});
<div ng-controller="ProductCtrl">
<button ng-click="ProductdetailsCtrl.showMe()">Press me</button>
</div>
If you haven't a wrapping tag that use the ProductdetailsCtrl controller, You have to add ng-controller to the button like this:
<div ng-controller="ProductCtrl">
<button ng-controller="ProductdetailsCtrl" ng-click="showMe()">Press me</button>
</div>
If you already have declared a wrapping tag with the controller I suggest to use the a controller's variable. Like this:
var app = angular.module('myapp', []);
app.controller('ProductdetailsCtrl', function() {
var vm = this;
vm.showMe = function() {
alert("button clicked");
};
});
<div ng-controller="ProductdetailsCtrl as ctrl1">
<div ng-controller="ProductCtrl">
<button ng-click="ctrl1.showMe()">Press me</button>
</div>
</div>
I have a div in my html. Inside the div I am invoking a controller. I need to pass some data from div to the controller. I don't have any other html element in div like input fields/buttons etc.
<div ng-controller="writeLoadTimeController">
<!--adding this controller to send the page load time to server-->
$scope.loadTime=$window.performance.timing.domContentLoadedEventEnd-$window.performance.timing.navigationStart;
</div>
How do I pass the value of the loadTime field to the controller.
you can try:
<div id="loadTime" ng-controller="writeLoadTimeController" ng-load="someFunction()">
</div>
and controller:
$scope.someFunction = function(){
$scope.loadTime=$window.performance.timing.domContentLoadedEventEnd-$window.performance.timing.navigationStart;
}
1: You can add onload event to the div and call a function which will calculate the loadTime for you. It should be like this.
you html:
<div id="loadTime" ng-controller="writeLoadTimeController">
</div>
and the controller:
app.controller("writeLoadTimeController", function($scope){
$scope.loadTime ="";
document.getElementById("loadTime").addEventListener('onload', onloadHandler);
function onloadHandler(){
$scope.loadTime=$window.performance.timing.domContentLoadedEventEnd-$window.performance.timing.navigationStart;
}
});
Then you can use {{loadTime}} in the html.
2: You can avoid adding onload listener and do the following:
you html:
<div id="loadTime" ng-controller="writeLoadTimeController">
</div>
and the controller:
app.controller("writeLoadTimeController", function($scope){
$scope.loadTime ="";
$scope.loadTimeCalculator = function(){
$scope.loadTime=$window.performance.timing.domContentLoadedEventEnd-$window.performance.timing.navigationStart;
}
$scope.loadTimeCalculator();
});
It will call loadTimeCalculator() function when the writeLoadTimeController is called.
Hope this will help you:)
I'd like to do something like:
<div class='row' ng-repeat='row in _.range(0,12)'>
<div id='{{row}}'></div>
</div>
but when in the controller I try:
function SetterForCatanCtrl($scope) {
$scope._ = _;
try {
var tile = document.getElementById('5');
tile.style.backgroundImage = "url('aoeu.png')";
} catch (e) {
alert(e)
}
}
getElementById returns null so how can an element's id be set using AngularJS variables?
The function SetterForCatanCtrl is run only once, when angular encounters a ngController directive while it bootstraps your app. When this happens the element you want to access from the DOM doesn't exist yet.
Doing DOM manipulation from a controller is not a good practice, directives are can solve the kind of problem you are facing. Your use case can be solved with CSS and just switching classes but I guess you want to do more than just setting a background image.
DOM manipulation from a controller
You are not asking for custom directives, so a quick solution could done using the ngClick directive and call a method that can switch images
Example HTML
<div ng-controller='ctrl'>
<div class='row' ng-repeat='row in _.range(0,12)'>
<div id='{{row}}' ng-click="click($index)">
<button>{{row}}</button>
</div>
</div>
</div>
And JS
var App = angular.module('app', []);
App.run(function($rootScope) {
$rootScope._ = _;
});
App.controller('ctrl', function($scope){
$scope.click = function(idx){
var elem = document.getElementById(idx);
console.log('clicked row', idx, elem);
};
});
So when a button is clicked you will get an id and use it to get an element from the DOM. But let me repeat, a for this use case a directive is a better choice.
JSFiddle: http://jsfiddle.net/jaimem/3Cm2Y/
pd: if you load jQuery you can use angular.element(<selector>) to select elements from the DOM.
edit: adding directive example
DOM manipulation from a directive
Using a directive is simpler, since you can just bind an event to the element the directive is applied to
HTML
<h1>Directive</h1>
<div class='row' ng-repeat='row in _.range(0,12)'>
<div id='{{row}}' my-directive>
<button>{{row}}</button>
</div>
</div>
JS
App.directive('myDirective', function(){
return function(scope, element, attr){
element.bind('click', function(){
console.log('clicked element: ', element, element.html());
});
};
});
http://jsfiddle.net/jaimem/3Cm2Y/1/