I am trying to use service in AngularJS and pass data from one controller to another on click of a button.
I tried and can see that service value is updated but I am unable to retrieve in the second controller, however, I can retrieve in the first Controller.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Search:<input type="text" ng-model="newValue"></p>
<button ng-click="myFunc(newValue)">OK</button>
</div>
<div ng-controller="myCtrl2">
{{receivedVal}}
</div>
<script>
var app= angular.module('myApp', []);
app.controller('myCtrl', function($scope,sharedProperties) {
$scope.stringValue = sharedProperties.getString();
$scope.myFunc = function(newValue) {
sharedProperties.setString(newValue);
$scope.stringValue = sharedProperties.getString();
console.log($scope.stringValue);
//I am getting the value here by calling sharedProperties.getString();
};
});
app.controller('myCtrl2', function($scope,sharedProperties) {
$scope.receivedVal = sharedProperties.getString();
console.log($scope.receivedVal);
//But I am not getting the updated value here by calling sharedProperties.getString();
});
app.service('sharedProperties', function() {
var stringValue = 'firstoccurence';
return {
getString: function() {
return stringValue;
},
setString: function(value) {
stringValue = value;
},
}
});
</script>
</body>
</html>
receivedVal is always coming blank even service is getting updated.
By looking at your HTML code; I can see both the controllers have already been instantiated.
So when you do $scope.receivedVal = sharedProperties.getString(); in controller 2, you are just getting value from service one time only (Note : You are not continuously observing the value from service). And hence in template of controller 2 the default value firstoccurence shall be displayed.
You are actually updating the value on click of OK button, which in turns updates value in service. But there is no way you told angular that now as values has been changed then now controller 2 should get this new value.
To active the scenario that you want , you need to use $broadcast and $on so that you can continuously observe change happening in controller 1.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Search:<input type="text" ng-model="newValue"></p>
<button ng-click="myFunc(newValue)">OK</button>
</div>
<div ng-controller="myCtrl2">
{{receivedVal}}
<button ng-click="thisWillGetValFromService()" >update this scope's value</button>
</div>
<script>
var app= angular.module('myApp', []);
app.controller('myCtrl', function($rootScope,$scope,sharedProperties) {
$scope.stringValue = sharedProperties.getString();
$scope.myFunc = function(newValue) {
sharedProperties.setString(newValue);
$scope.stringValue = sharedProperties.getString();
console.log($scope.stringValue);
//I am getting the value here by calling sharedProperties.getString();
$rootScope.$broadcast('greeting', newValue);
};
});
app.controller('myCtrl2', function($scope,sharedProperties) {
$scope.receivedVal = sharedProperties.getString();
console.log($scope.receivedVal);
//But I am not getting the updated value here by calling sharedProperties.getString();
$scope.$on('greeting', function(ev,val){
$scope.receivedVal = val
})
});
app.service('sharedProperties', function() {
var stringValue = 'firstoccurence';
return {
getString: function() {
return stringValue;
},
setString: function(value) {
stringValue = value;
},
}
});
</script>
</body>
Above snippet shall solve your problem.
Updated :
Consider a scenario where you have routing configuration defined. So by default only controller 1 and its templates loads in HTML. Then you update ur input box and click OK button. This will save data to service.
Then later on consider on click of some link you re redirecting the app to route of your controller 2 so at this point your controller 2 will get instantiated and $scope.receivedVal = sharedProperties.getString(); this will give you updated value.
Its just a matter of when you load your template (controller) In your case you load both the controllers at a time so you need to use broadcast and on. But if your second component going to load sometime later then you can always use service.
Value is updating in the second controller
But it is not reflecting in the :
<div ng-controller="myCtrl2">
{{receivedVal}}
</div>
Because ng-controller creates new scope
you should write one extra method like in this:
https://codepen.io/amar9312/pen/yRJKGj
I wrote an angular code to implement Like and remove Like functionality. For this purpose I used a directive "like-directive" which takes three functions
1. upFn : code to be executed when liked
2. downFn: code to be executed when like removed
3. upvChk: function which checks whether it is liked or not. I started this with false
For some reason I cannot use a variable with ng-if. I have to use the upvChk function. But this function is getting called more than twice. It should be called only twice because I'm using ng-if twice.
Here is the codepen link http://codepen.io/puneet27/pen/jApJww/
angular.module('app',[])
.controller('MainCtrl',['$scope',MainCtrl])
.directive('likeDirective',[likeDirective]);
function MainCtrl($scope){
var mcl = this;
mcl.checkUpvoted = checkUpvoted;
mcl.upvote = upvote;
mcl.downvote = downvote;
function checkUpvoted(){
alert("function to check whether liked or not");
return mcl.upvoted;
}
function upvote(){
alert('like completed');
mcl.upvoted = true;
}
function downvote(){
alert('dislike completed');
mcl.upvoted = false;
}
}
function likeDirective(){
return {
restrict: 'E',
scope: {
upFn:'&upFn',
downFn:'&downFn',
upvChk:'&upvChk'
},
templateUrl: 'tpl.html'
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl as mc">
<like-directive up-fn="mc.upvote()" down-fn="mc.downvote()" upv-chk="mc.checkUpvoted()"></like-directive>
</div>
<script type="text/ng-template" id="tpl.html">
<div><span id="upvote" ng-if="!upvChk()" ng-click="upFn()">Like</span><span id="upvoted" ng-if="upvChk()" ng-click="downFn()">Liked</span></div>
</script>
</div>
Here I'm attempting to extend the standard text filter to perform a get request and pass value to extended filter user has entered
The filter name is 'search' :
myapp.filter('search', function($filter){
console.log('search param'+$scope.search)
$http.get('http-hello2.html').success(function (data) {
return $filter;
});
But receive error :
Error: [$http:badreq] http://errors.angularjs.org/1.4.9/$http/badreq?p0=undefined
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:6:416
at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:85:218)
at Function.c.$get.m.(anonymous function) [as get] (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:90:109)
at link (https://run.plnkr.co/rz2TWpQpyYaVbHXN/script.js:14:27)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:73:222
at ca (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:73:279)
at I (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:62:174)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:69:193
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:119:221 <status-viewer url="sourceUrl" class="ng-isolate-scope">
How to extend standard AngularJS text filter to invoke custom functionality and pass parameter to this filter? The custom functionality should occur prior to the standard filter logic being invoked.
plnnkr : https://plnkr.co/edit/F0XsOPZKq5HArFo9vtFs?p=preview
src :
goob.html :
goob
http-hello2.html
2. http-hello2.html
test.html :
test
index.html :
<!doctype html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="FetchCtrl">
<label>Filter: <input ng-model="search"></label>
<div ng-repeat="sourceUrl in sourceUrls | filter:search">
<status-viewer url="sourceUrl"> </status-viewer>
</div>
</div>
</body>
</html>
mytemplate.html :
<!--<h1>{{url}}</h1>-->
<div>
<p>{{model}}</p>
</div>
script.js :
var myapp = angular.module('app', []).controller('FetchCtrl', FetchCtrl)
myapp.directive('statusViewer', function ($http , $interval) {
return {
restrict: 'E',
templateUrl: 'mytemplate.html',
scope: {
url: '='
},
link: function (scope, elem, attrs, ctrl) {
scope.isFinishedLoading = false;
$http.get(scope.url).success(function (data) {
scope.model = data;
});
}
};
});
myapp.filter('search', function($filter){
console.log('search param'+$scope.search)
$http.get('http-hello2.html').success(function (data) {
return $filter;
});
});
function FetchCtrl($scope, $http, $q , $parse) {
$scope.sourceUrls = [
'http-hello2.html',
,'test.html'
,'goob.html'];
}
First of all you need to inject $http Service into you filter to prevent error that you have:
myapp.filter('search', function($filter, $http){
and second thing:
you should not do
$http.get(scope.url)
not being sure that scope.url is already set.
I would suggest to do request by condition;
if(scope.url){
//$http.get(scope.url)...
}
Error comes out because initially you had no value in
$scope.search value and url has passed as undefined, other thing is you were tried to use $scope inside filter, which can't be accessible
As I can see that you don't wanted to load some template on change of input value. And from your current approach you wanted to load template from filter based on input(if I understood it correctly). But it seems like you are on wrong track.
Basically filtering is used to do some manipulation on binding while showing some value(like showing normal word in uppercase will use uppercase filter). Here you are using the filter for loading template on input change(basically that would fire a filter but not because of input change, it fires on digest cycle). Every time digest cycle will run it will make an ajax to fetch that template. Technically angular filter is not meant for what you are doing there.
Extending text filter turns out to be wrong approach as you don't need to extend it.
Better I'd say you should put ng-change event on input field with some function, that will fire up that function on each input change. and it will not make any change in filter working. By making this changes this would make template call only when input is changed
Markup
<input ng-model="search" ng-change="change()" />
Code
$scope.change = function() {
//code here.
};
Hey guys I need to get tha data value of the button when I click on it. I tried in this way but it doesn't work..
var app = angular.module('myApp', []);
app.controller("myAppCtrl", function($scope, $attrs) {
$scope.events = {}
$scope.events.btnLoadMore = function() {
var panel = $attrs.emptywidget;
alert(panel);
}
});
HTML
<html ng-app="myApp">
<head>
<title></title>
</head>
<body ng-controller="myAppCtrl">
<button data-emptywidget="#panel2" ng-click="events.btnLoadMore()">Click</button>
</body>
</html>
The only way you can access that data attribute would be through standard DOM access, which is not wise inside a controller. The $attrs variable you're passing into your controller also won't give you very much, as your controller doesn't directly related to anything (or at least it doesn't need to or shouldn't)
If you need to do something like that, then you could change your ng-click to something like
ng-click="events.btnLoadMore('#panel2')"
Then change the definition of your btnLoadMore function to take an argument. Alternatively you can write a directive that would be given that value, but that's more complex. But it depends what you want to do with it really. The above should work though
You could use a combination of angular.element and passing in the $event source as well: http://jsfiddle.net/ahchurch/9USEv/1/
<div ng-controller="myAppCtrl">
<button data-emptywidget="#panel2" ng-click="events.btnLoadMore($event)">Click</button>
</div>
var app = angular.module('myApp', []);
app.controller("myAppCtrl", function($scope, $attrs) {
$scope.events = {}
$scope.events.btnLoadMore = function($event) {
console.log($event);
var panel = angular.element($event.target).attr("data-emptywidget");
console.log(panel);
}
});
You can do a few different things.
1) You can pass in the data via the function so like
ng-click="events.btnLoadMore('#panel2')"
Then change your function to match so:
$scope.events.btnLoadMore = function(panel) {
alert(panel);
}
2) You can pass in the data via the $event parameter
ng-click="events.btnLoadMore($event)"
Then change your function to match so:
$scope.events.btnLoadMore = function(clickEvent) {
alert(clickEvent.target.attributes['data-emptywidget'].value);
}
3) You can just look at the arguments passed in to the function
$scope.events.btnLoadMore = function() {
alert(arguments[0].target.attributes['data-emptywidget'].value);
}
I am trying to use AngularJS two-way binding text which includes Latex style equations. I would like to call MathJax to format the equations, but I'm not sure of the best way to ensure that MathJax is called after AngularJS finishes changing the model. I think I need a callback. Here is my JavaScript:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.Update = function() {
$scope.Expression = 'Evaluate: \\( \\frac{9}{4} \\div \\frac{1}{6} \\)';
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}
$scope.Expression = 'Evaluate: \\( \\frac{5}{4} \\div \\frac{1}{6} \\)';
}
And here is my HTML:
<div ng-controller="MyCtrl">
<button ng-click="Update()">Update</button>
{{Expression}}
</div>
Fiddle is here: http://jsfiddle.net/LukasHalim/UVjTD/1/. You'll notice that on the fiddle the original expression isn't removed even after you click the update button twice - seems like a bug or conflict.
Having wasted many days (and maybe weeks) fighting MathJax, I'm all too familiar with its various quirks with updating math expressions on the fly. I'm brand new to Angular but this gave me a good chance to dive in and I ended up with a solution which solves my problems -- hopefully it'll solve yours as well.
Live demo: jsfiddle
Instead of using the plain interpolation that Angular provides, I created a new directive based on ng-bind called mathjax-bind.
If expression is a variable containing math code, then instead of \( {{expression}} \) you can write:
<span mathjax-bind="expression"></span>
and everything will be typeset and updated at the appropriate times.
The supporting code for the directive follows:
myApp.directive("mathjaxBind", function() {
return {
restrict: "A",
controller: ["$scope", "$element", "$attrs",
function($scope, $element, $attrs) {
$scope.$watch($attrs.mathjaxBind, function(texExpression) {
var texScript = angular.element("<script type='math/tex'>")
.html(texExpression ? texExpression : "");
$element.html("");
$element.append(texScript);
MathJax.Hub.Queue(["Reprocess", MathJax.Hub, $element[0]]);
});
}]
};
});
Simplest, fastest and most stable solution:
$rootScope.$watch(function(){
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
return true;
});
Advantages:
Easy to setup, just copy this code.
Everything on your page is typeset.
It renders much faster than the other solutions. This is because it can render the page in one go. Other answers here wait for one item to finish, until they typeset the next one. That makes rendering veeeery slow if there are for example multiple mathjax-bind directives (as another answer suggests). This point is the reason I was looking for a different answer.
You can still easily exclude elements using the option “ignoreClass” in your mathjax settings.
Benchmarking:
100 mathjax-bind directives took 63 seconds, while with this method it took 1.5 second to render the page. I know that this function will be executed a lot since it's called on every digest cycle, however, it doesn't noticeably slow down the page.
I created a simple fiddle expanding on Ben Alpert's answer. Here's the fiddle and plunk.
Specifically If a text has only a part of it to be converted by Mathjax, you can use this.
For inline mathjax you must surround the text by $, and for block display you must surround the block by $$. (You can use any format you like if you create the corresponding regex)
app.js
MathJax.Hub.Config({
skipStartupTypeset: true,
messageStyle: "none",
"HTML-CSS": {
showMathMenu: false
}
});
MathJax.Hub.Configured();
var myApp = angular.module("myApp", []);
myApp.directive("mathjaxBind", function() {
return {
restrict: "A",
scope:{
text: "#mathjaxBind"
},
controller: ["$scope", "$element", "$attrs", function($scope, $element, $attrs) {
$scope.$watch('text', function(value) {
var $script = angular.element("<script type='math/tex'>")
.html(value == undefined ? "" : value);
$element.html("");
$element.append($script);
MathJax.Hub.Queue(["Reprocess", MathJax.Hub, $element[0]]);
});
}]
};
});
myApp.directive('dynamic', function ($compile) {
return {
restrict: 'A',
replace: true,
link: function (scope, ele, attrs) {
scope.$watch(attrs.dynamic, function(html) {
html = html.replace(/\$\$([^$]+)\$\$/g, "<span class=\"blue\" mathjax-bind=\"$1\"></span>");
html = html.replace(/\$([^$]+)\$/g, "<span class=\"red\" mathjax-bind=\"$1\"></span>");
ele.html(html);
$compile(ele.contents())(scope);
});
}
};
});
function MyCtrl($scope, $element) {
$scope.html = "A coin of is $ \\frac{5}{4} $ thrown $$\\frac{1}{6}$$ dfv";
}
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&delayStartupUntil=configured&dummy=.js"></script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<input type="text" ng-model="html"/><br/>
<div dynamic="html"></div>
</div>
</body>
style.css
input[type="text"] {
width: 800px;
}
.red{
color:red;
display:inline-block;
}
.blue{
color:blue;
display:block;
}
Take a look at http://jsfiddle.net/pz5Jc/
In your template:
{{Label}} <span id="mathElement">{{Expression}}</span>
In your controller:
$scope.Update = function() {
$scope.Expression = '\\frac{9}{4} \\div \\frac{1}{6}';
$scope.Label = 'Updated Expression:'
var math = MathJax.Hub.getAllJax("mathElement")[0];
math.Text('\\frac{4}{4} \\div \\frac{2}{6}');
}
Couple of points:
I'm not too familiar with mathjax, but:
Splitting the label out from the expression allows you to work with the expression directly.
You need to manually pick up a DOM element to force a refresh of the expression. This isn't a very 'angular' way to do things unfortunately - but when mathjax parses the expression (and inserts it's own DOM elements), it pushes those elements outside the angular bindings.
Fix here is to specifically select the correct mathjax element and call a text change function to update the expression.
Here's a directive that lets you use double curly markup inside the expression (and doesn't require setting an expression variable on the scope). It's based on this blog post, except I only support MathJax, and I save the compiled DOM, so that it updates on changes to scope variables.
As Alex Osborn said, it's best to separate non-math from math.
Usage:
<p>This is inline math: <latex>x^{ {{power}} }</latex>,
and this is display math: <div latex> y^{ {{power}} } .</div></p>
In a snippet:
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.power = "\\sin(x^2)";
})
.directive('latex', function() {
return {
restrict: 'AE',
link: function(scope, element) {
var newDom = element.clone();
element.replaceWith(newDom);
var pre = "\\(",
post = "\\)";
if (element[0].tagName === 'DIV') {
pre = "\\[";
post = "\\]";
}
scope.$watch(function() {
return element.html();
}, function() {
console.log(element);
newDom.html(pre + element.html() + post);
MathJax.Hub.Typeset(newDom[0]);
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<div ng-app="app" ng-controller="ctrl">
<p>Power:
<input ng-model="power" />
</p>
<p>This is the inline latex,
<latex>x^{ {{power}} }</latex>, followed by some display mode latex
<div latex>y^{ {{power}} } = {{power}}.</div>And that's it!
</p>
</div>
A simple solution is to use $timeout to put MathJax.Hub.Queue(["Typeset", MathJax.Hub]) in the browser event queue (see Run a directive after the DOM has finished rendering).
Something like this:
var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $timeout) {
controller = this;
$scope.Update = function () {
$scope.value = " \\( \\frac{5}{4} \\div \\frac{1}{6} \\)";
$timeout(controller.updateMathJax, 0);
}
this.updateMathJax = function () {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}
});
You can try with my modifications http://jsfiddle.net/bmma8/4/
modify input or click on button will update your expression.
js:
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
});
var myApp = angular.module('myApp',[]);
function MyCtrl($scope, $log) {
var QUEUE = MathJax.Hub.queue; // shorthand for the queue
$scope.Update = function() {
QUEUE.Push(["Text",MathJax.Hub.getAllJax("MathOutput")[0],"\\displaystyle{"+ $scope.Expression+"}"]);
//$scope.Expression = 'Updated Expression: \\( \\frac{9}{4} \\div \\frac{1}{6} \\)';
//MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}
$scope.Expression = 'Original Expression: \\( \\frac{5}{4} \\div \\fra
and html:
<div ng-controller="MyCtrl">
<button ng-click="Update()">Update</button>
<input ng-model="Expression" ng-change="Update()">
<div id="MathOutput">
You typed: ${}$
</div>
</div>
Alexandre
I actually thought of another solution. When you render some angular and math you do this:
ANGULAR CONTROLLER
$scope x = 5;
HTML
<h3> {{ '$ Multiplication = '+ x + ' * 2 =' + (x*2) + '$'}} </h3>
Formated Math Jax result
Multiplication = 5 * 2 = 10
The key is to include the dollar signs inside the brackets as text. When Angular renders them, the dollar signs will appear as plain text, but when the Math Jax format comes into action it will recognize the dollar signs and do the magic.
I Build a directive for this....
FIDDLE: http://jsfiddle.net/8YkUS/1/
HTML
p data-math-exp data-value="math">
JAVASCRIPT
appFlipped.directive("mathExp", function () {
return {
scope: {
value: "="
},
link: function (scope, el) {
var domEl = el[0];
scope.$watch("value", function (newValue) {
//nothing to do here
if (newValue == null || window.MathJax == null)return;
//update the dom with the new value and pass the hub for styling the equation
domEl.innerHTML = '`' + newValue + '`';
MathJax.Hub.Queue(["Typeset", MathJax.Hub, domEl]);
});
}
}
});
I fiddled a bit more on Roney's solution. The display math should be displayed in display mode; with
<script type="math/tex; mode=display">
I added an attribute to the generated span to indicate that.
Fiddle is here http://jsfiddle.net/repa/aheujhfq/8/