We Keep Coding

Passing variables betweencontrollers in angular js

I am new to angular js and its services so please bear with this basic question. Please read comment inside code to understand what I need.
.controller('ctrlr1', function($scope, myservice) {
var a = "abc";
})
.controller('ctrl2', function ($scope, myservice) {
// how to get value of a
})
.service('myservice', function() {
//what goes here?
});
Thanks in advance

Basic sharing by angular services
.controller('ctrlr1', function($scope, myservice) {
var a = "abc";
var b = 123;
myservice.myData = a;
myservice.myDataB = b;
})
.controller('ctrl2', function ($scope, myservice) {
// how to get value of a
console.log(myservice.myData);
console.log(myservice.myDataB);
})
.service('myservice', function() {
//what goes here?
this.myData = '';
this.myDataB = 0;
});

You can use myservice because its the efficient way but don't use $brodcast.
Here is an example:-
var testModule = angular.module('testmodule', []);
testModule
.controller('QuestionsStatusController1',
['$rootScope', '$scope', 'myservice',
function ($rootScope, $scope, myservice) {
$scope.myservice = myservice;
}]);
testModule
.controller('QuestionsStatusController2',
['$rootScope', '$scope', 'myservice',
function ($rootScope, $scope, myservice) {
$scope.myservice = myservice;
}]);
testModule
.service('myservice', function() {
this.xxx = "yyy";
});

How to use a service from directive to call a function?

controller
angular.module('myApp')
.controller('myCtrl', [ '$mdDialog', '$mdMedia', 'viewDialog', myCtrl]);
..
function myCtrl( $mdDialog, $mdMedia, viewDialog) {
$scope.viewItem = function(ev,id) {
viewDialog.ITEM(ev,id)
};
}
html
<div ng-controller="myCtrl">
<md-list-item ng-repeat="item in myarr">
<a my-view-dialog">
<h4> {{item.id}} </h4>
</a>
</md-list-item>
</div>
When I call the function directly form controller the modal window works fine on click
using the directive
My directive
angular.module('myApp')
.directive('myViewDialog', function ($parse) {
return {
compile: function(tElm,tAttrs){
var exp = $parse('viewItem($event,item.id)')
return function (scope,elm){
elm.bind('click',function(){
exp(scope);
});
};
}
};;
});
Now I want to remove the controller dependency and directly call the viewDialog service from the directive it does not work.
here is code for service injection
angular.module('myApp')
.directive('myViewDialog', function ($parse, viewDialog) {
return {
compile: function(tElm,tAttrs){
var exp = $parse('viewDialog.ITEM($event,item.id)')
return function (scope,elm){
elm.bind('click',function(){
exp(scope);
});
};
}
};;
});

Instead of
.directive('myViewDialog', function ($parse, viewDialog)
Try
.directive('myViewDialog', [ '$parse', 'viewDialog', function ($parse, viewDialog)

angular.module('myApp')
.directive('myViewDialog',['viewDialog','$parse', function (viewDialog,$parse) {
return {
compile: function(tElm,tAttrs){
var exp = $parse('viewDialog.ITEM($event,item.id)')
return function (scope,elm,attr,ctrl){
elm.bind('click',function(){
exp(scope);
});
};
}
};;
}]);

ngBindHtml not Rendering Sanitized HTML

I've got a simple angular app, and I'm trying to inject some html into the page using ngBindHtml. However, it's not being injected. Here's my HTML:
<main id="main" ng-bind-html="oreGen | trust"></main>
And here's my angular app:
angular.module('programApp', ['programApp.controllers','programApp.filters','ngSanitize']);
angular.module('programApp.controllers', [])
.controller('programController', ['$scope', '$filter', function($scope, $filter){
$scope.oreGen = '<div class="oreFunction" ng-click="collectFunction(\'parenthesis\', 1)">test text</div>';
$scope.collectFunction = function(value1, value2){
alert(value1 + value2);
};
}]);
angular.module('programApp.filters', []).filter('trust', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
When the page is loaded, nothing appears inside the main element.
Here's a codepen: http://codepen.io/trueScript/pen/MwbVpO?editors=101
You can see the div being ngBinded does not appear. Why is this?

You can use a directive instead a filter. Please look at this JSFiddle
HTML:
<div ng-app="myApp" ng-controller="programController">
<dir id="main" content="oreGen"></dir>
</div>
JS:
angular.module('myApp', [])
.controller('programController', ['$scope', '$filter', function ($scope, $filter) {
$scope.oreGen = '<dir class="oreFunction" ng-click="collectFunction(\'parenthesis\', 1)">test text</dir>';
$scope.collectFunction = function (value1, value2) {
alert(value1 + value2);
};
}])
.directive('dir', function ($compile, $parse) {
return {
restrict: 'E',
link: function (scope, element, attr) {
scope.$watch(attr.content, function () {
element.html($parse(attr.content)(scope));
$compile(element.contents())(scope);
}, true);
}
}
});

AngularJS : how to use ng-change in factories?

My html:
<div ng-controller="MainController">
<input type="text" ng-model="value" ng-change="change(value)">
</div>
My controller:
app.controller('MainController', ['$scope', function($scope){
var search;
$scope.change = function(value) {
search = value;
}
}]);
It works great.
Now I want to use this function (ng-change) into factory, but I don't know how. So, my controller:
app.controller('MainController', ['$scope', 'MainFactory', function($scope, MainFactory){
$scope.search = MainFactory.getSearch();
}]);
My factory:
app.factory('MainFactory', function(){
var search;
return {
getSearch: function() {
whatMustBeHere.change = function(value) {
search = value;
}
return search;
}
}
});
Maybe, there is some other way to solve this issue? Thanks a lot.

Use getters and setters to save the value in your factory
You can just set the value onChange (Don't forget to inject the factory in your controller)
Like this:
app.controller('MainController', ['$scope', function($scope, MainFactory){
$scope.search = MainFactory.getSearchValue();
$scope.change = function(value) {
MainFactory.setSearchValue(value);
}
}]);
and in your factory
app.factory('MainFactory', function(){
var search;
return {
setSearchValue: function(value) {
this.search = value;
}
getSearchValue: function() {
return this.search;
}
}
});

How to communicate controller with each other in AngularJS?

I'm writing a controller. This controller has to communicate with an other controller. But I don't know is it posible?
HTML:
<div data-ng-app="TestApp">
<div data-ng-controller="menuCtrl">
<ul>
<li> <a data-ng-click="Click()">
Menü1</a>
</li>
</ul>
</div>
<div data-ng-controller="pageCtrl">
<hr/>
<button data-ng-click="getText()">GetText</button>
<br/>
<strong data-ng-model="boldText"> {{boldText}}</strong>
</div>
JS:
var app = angular.module('TestApp', []);
app.controller('menuCtrl', function ($rootScope, $scope) {
$scope.Click = function () {
//???
};
})
.controller('pageCtrl', function ($rootScope, $scope) {
$scope.getText = function () {
$scope.boldText = 'tst';
};
});
I repaired sample on JSfiddle:sample

You can easily achieve that with broadcasting:
var app = angular.module('TestApp', []);
app.controller('menuCtrl', function ($rootScope, $scope) {
$scope.Click = function () {
$scope.$broadcast('MyClickEvent', {
someProp: 'Clicking data!' // send whatever you want
});
};
})
.controller('pageCtrl', function ($rootScope, $scope) {
$scope.getText = function () {
$scope.boldText = 'tst';
};
$scope.$on('MyClickEvent', function (event, data) {
console.log(data); // 'Data to send'
});
});

Using the events broadcast, we can pass the value form one controller to another
app.controller('menuCtrl', function ($rootScope, $scope) {
$scope.Click = function () {
var valueToPass = "value";
$rootScope.$broadcast('eventMenuCtrl', valueToPass);
};
})
.controller('pageCtrl', function ($rootScope, $scope) {
$scope.getText = function () {
$scope.boldText = 'tst';
};
$scope.$on('eventMenuCtrl', function(event, value) {
$scope.boldText = value;
})
});
http://jsfiddle.net/q2yn9jqv/4/