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>
Related
<script>
function myFunction() {
console.log('YAY');
alert("Hello! I am an alert box!!");
}
</script>
<button type="button" ng-click="myFunction()">Submit</button>
ng-click is not working in this case. Also how to call an unnamed JavaScript function on click?
If you really need to do that, like it's part of some library, you could do it by injecting $window service in your controller, then calling your controller function "myFunctionInController()"
<script>
function myFunction() {
console.log('YAY');
alert("Hello! I am an alert box!!");
}</script>
<button type="button" ng-click="myFunctionInController()">Submit</button>
and from that function call my function
$window.myFunction()
myFunction should be declared inside the controller. Check simple example
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myFunction = () =>{
console.log('YAY');
alert("Hello! I am an alert box!!");
}
});
</script>
The button should be inside controller Scope or Child or ng-controller directive
<div ng-app="myApp" ng-controller="myCtrl">
<button type="button" ng-click="myFunction()">Submit</button>
</div>
step 1: create a Module for html
var angularApp = angular.module('angularApp',[]);
step 2: create a Controller for View
angularApp.controller('HomeCtrl',['$scope',function($scope){
}]);
step 3: create html
<div class="main" ng-app="angularApp">
<div class="Main" ng-controller="HomeCtrl">
<button type="button" ng-click="myFunction()">Submit</button>
</div>
<div>
step 4: add the Button click method in the Step 2 means in the Control
angularApp.controller('HomeCtrl',['$scope',function($scope){
$scope.myFunction = function(){
("Hello! I am an alert box!!");
}
}]);
$scope.man="A"; //default text
<div ng-app="myApp" ng-controller="myCtrl">
<p>person clicked {{man}}</p>
<button ng-click="man('b')">B</button><br>
<button ng-click="man('c')">C</button>
</div>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.man="A";
$scope.man=function(value)
{
$scope.man=value;
}
});
i am new to angularjs i wanted to change text by arguments but text is not changing and the default text A is also not getting displayed can some one help me out with this
check this link
https://jsfiddle.net/nikhila/31gz56tn/
Your $scope variable and function are same. Change your function like this,
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<p>person clicked {{man}}</p>
<button ng-click="change('b')">B</button><br>
<button ng-click="change('c')">C</button>
</div>
Controller:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.man = "A";
$scope.change = function(value) {
$scope.man = value;
}
});
DEMO
Say, I have multiple directives, on click how can i add the "directive" what i want to "popup". i have number of scenario, but using only one pop-up for all. whenever the appropiate element is clicked, using the same pop-up, i would like to update the other 'directives'
for sample, i created only one. click on the red bordered title
here is my code :
<div ng-controller="main">
{{name}}
<div class="info" ng-click="popIt()">
<info-board></info-board>
</div>
<div class="popup" ng-if="show" ng-click="popIt()">
//add directive dynamically - how?
</div>
</div>
</body>
<script type="text/ng-template" id="modalPopup.html">
<div class='ng-modal'>
some information here.
</div>
</script>
js:
var myApp = angular.module("myApp", []);
myApp.controller("main", function($scope) {
$scope.name = "Mo!";
$scope.show = false;
$scope.popIt = function (show) {
$scope.show = !$scope.show;
}
})
myApp.directive("infoBoard", function() {
return {
replace : true,
templateUrl: "modalPopup.html",
scope : {},
link : function (scope, element, attrs) {
element.append("Hi there!")
}
}
})
Demo Onlie
I am still a novice with angular. I have asked a question similar to this before, but it seems to be a different issue at work here.
I have two controllers and a factory sharing information between them. I have two separate divs using two different controllers to show / hide using ng=show;
HTML
<div id=main>
<div ng-controller="Ctrl1">
<div ng-show="var1">Hidden Stuff</div>
</div>
<div ng-controller="Ctrl2">
<div ng-show="var1">More Hidden Stuff</div>
</div>
</div>
Both use the same var for ng-show, shared by a factory
JS Factory
app.factory('Srvc', function($rootScope) {
var Srvc = {};
Srvc.var1;
return Srvc;
});
JS Controllers
app.controller('Ctrl1', function($scope, Srvc) {
$scope.var1 = false;
if (user interacts with html in div with ng-controller="Ctrl1") {
$scope.var1 = true;
Srve.var1 = $scope.var1;
}
});
app.controller('Ctrl2', function($scope, Srvc) {
$scope.var1 = Srvc.var1;
if ($scope.var1 === true) {
update HTML in div with ng-controller="Ctrl2"
although I shouldn't need to do this really should I?
}
});
So from what I can tell the factory works ok, the data is saved in the factory Srvc.var1. However when I pass the data true to Srvc.var1 I cannot seem to get Ctrl2 to 'trigger' and update its html with ng-show=true
One way to solve this problem without explicitly creating a watcher, is to wrap var1 in an object inside the service and then pass this object as a $scope variable for both Ctrl1 and Ctrl2 controllers.
DEMO
Javascript
.factory('Svc', function() {
var service = {
data: {}
};
// If you perform http requests or async procedures then set data.var1 here
service.data.var1 = true;
return service;
})
.controller('Ctrl1', function($scope, Svc) {
$scope.data = Svc.data;
})
.controller('Ctrl2', function($scope, Svc) {
$scope.data = Svc.data;
});
HTML
<div id="main">
<div ng-controller="Ctrl1">
<div ng-show="data.var1">Hidden Stuff</div>
<button type="button" ng-click="data.var1 = true">Set data.var1 to true</button>
<button type="button" ng-click="data.var1 = false">Set data.var1 to false</button>
</div>
<hr>
<div ng-controller="Ctrl2">
<div ng-show="data.var1">More Hidden Stuff</div>
<button type="button" ng-click="data.var1 = true">Set data.var1 to true</button>
<button type="button" ng-click="data.var1 = false">Set data.var1 to false</button>
</div>
</div>
So it seems I need to $watch the service for a change within the controller.
Original answer is here.
app.controller('Ctrl2', function($scope, Srvc) {
$scope.$watch(function () {
return Srvc.var1;
},
function(newVal, oldVal) {
$scope.var1 = newVal;
}, true);
});
I think setting Var1 to $rootScope instead of Srvc should work, just call $scope.$root.$digest() after updating var1.
and use ng-show=$root.Var1 in view.
I want a button in angularJs, that when I press it a function is called and when I press it again it does another function, like an ON-OFF switch.
I have this:
<a ng-click="addForm(data)" href=""> <div class="starOff" ng-class="{starOn: checkF(data)}"></div> </a>
I would to call another function when I click it once.
You can use ng-switch.
<div ng-app ng-controller="Ctrl">
<div ng-switch on="selected">
<button ng-switch-when='true' ng-click='button1()'>button1</button>
<button ng-switch-when='false' ng-click='button2()'>button2</button>
</div>
</div>
function Ctrl($scope) {
$scope.selected = true;
$scope.button1 = function () {
//do logic for button 1
$scope.selected = !$scope.selected;
console.log('btn1 clicked');
}
$scope.button2 = function () {
//do logic for button 2
$scope.selected = !$scope.selected;
console.log('btn2 clicked');
}
}
Demo on jsFiddle
Why don't you change the ng-click to something other than addForm(data), like handleClick(data), and then in your controller you can define handleClick(data) to call addForm(data) if a certain flag is already true?
Another possible solution, using ng-click and ng-class to toggle the class.
HTML
<div ng-app="miniapp">
<div ng-controller="Ctrl">
<a ng-click="newClass=toggleClass($event)" ng-class="newClass" href="">Toggle</a>
</div>
</div>
JS
var $scope;
var app = angular.module('miniapp', []);
function Ctrl($scope) {
$scope.toggleClass = function(obj) {
if (obj.srcElement.className == 'starOn') {
return 'starOff';
} else if (obj.srcElement.className == 'starOff') {
return 'starOn';
} else {
return 'starOn';
}
}
};
There are probably better ways to grab the current class name.
Here's the full jsFiddle.
Try using a property instead of a call to the function checkF(). Pretend the property is mySwitch. When your addForm() is called, set mySwitch to true.
How To Toggle A Function Using ng-click
One (of many) methods to swap between two functions when using ng-click. It uses a similar method to what tnunamak suggested.
HTML
<div ng-app="miniapp">
<div ng-controller="Ctrl">
<a ng-click="toggle(toggled)" ng-init="toggled=false" href="">Toggle</a>
</div>
</div>
JS
var $scope;
var app = angular.module('miniapp', []);
function Ctrl($scope) {
$scope.toggle = function(toggled) {
if (toggled == false) {
alert('Function A');
$scope.toggled = true;
} else if (toggled == true) {
alert('Function B');
$scope.toggled = false;
}
}
};
And the full jsFiddle.
You can implement it using Font-Awesome and angular js with following example
<div class="onoffswitch" >
<input type="checkbox" name="someOnOFF" class="onoffswitch-checkbox" id="myonoffswitch6" ng-model="vm.youmodelOnOff" />
<label class="onoffswitch-label" for="myonoffswitch6">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>