Develop Reference

Controller and binding async variables

I want to control the display of elements using a variable that is defined in the controller.
But if variables change async, my code doesn't work as expected.
In my example, I output to console value of vm.fruit inside methods setFruit and hasFruit.
And after set value for vm.fruit in setFruit, in hasFruit vm.fruit value is undefined.
Have ideas about how to fix it?
And I don't want call controllers method inside directive.
UPD. I removed the definition exampleController from asyncChoice, how suggested #LeroyStav. I think he is right. But this not solved the problem.
angular.module('app', [])
.controller('exampleController', exampleController)
.directive('wrapper', wrapper)
.directive('asyncChoice', asyncChoice);
function exampleController() {
var vm = this;
vm.selectMode = false;
vm.fruit = undefined;
vm.hasFruit = hasFruit;
vm.selectFruit = selectFruit;
vm.setFruit = setFruit;
function hasFruit() {
console.log('hasFruit: ' + vm.fruit);
return (typeof vm.fruit !== 'undefined');
}
function selectFruit() {
vm.selectMode = true;
}
function setFruit(fruit) {
setTimeout(
function() {
vm.fruit = fruit;
vm.selectMode = false;
console.log(vm.fruit);
},
1000
);
}
}
function wrapper() {
return {
restrict: 'E',
trancslude: true,
controller: 'exampleController',
controllerAs: 'vm'
};
}
function asyncChoice() {
return {
template: `
<button ng-click="selectFruit({fruit: '🍊'})">🍊</button>
<button ng-click="selectFruit({fruit: '🍋'})">🍋</button>
`,
scope: {
selectFruit: '&'
},
controller: 'exampleController',
controllerAs: 'vm'
}
}
angular.bootstrap(
document.getElementById('root'), ['app']
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="root">
<wrapper>
<button ng-if="!vm.hasFruit()" ng-click="vm.selectFruit()">Choice fruit</button>
<p ng-if="vm.hasFruit()">You choice <span ng-bind="vm.fruit"></span></p>
<async-choice ng-if="vm.selectMode" select-fruit="vm.setFruit(fruit)"></async-choice>
</wrapper>
</div>

I provide $scope to exampleController and call $scope.$digest() after execution async operation.
angular.module('app', [])
.controller('exampleController', exampleController)
.directive('wrapper', wrapper)
.directive('asyncChoice', asyncChoice);
exampleController.$inject = ['$scope'];
function exampleController($scope) {
var vm = this;
vm.selectMode = false;
vm.fruit = undefined;
vm.hasFruit = hasFruit;
vm.selectFruit = selectFruit;
vm.setFruit = setFruit;
function hasFruit() {
console.log('hasFruit: ' + vm.fruit);
return (typeof vm.fruit !== 'undefined');
}
function selectFruit() {
vm.selectMode = true;
}
function setFruit(fruit) {
setTimeout(
function() {
vm.fruit = fruit;
vm.selectMode = false;
console.log(vm.fruit);
$scope.$digest();
},
1000
);
}
}
function wrapper() {
return {
restrict: 'E',
trancslude: true,
controller: 'exampleController',
controllerAs: 'vm'
};
}
function asyncChoice() {
return {
template: `
<button ng-click="selectFruit({fruit: '🍊'})">🍊</button>
<button ng-click="selectFruit({fruit: '🍋'})">🍋</button>
`,
scope: {
selectFruit: '&'
},
controller: 'exampleController',
controllerAs: 'vm'
}
}
angular.bootstrap(
document.getElementById('root'), ['app']
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="root">
<wrapper>
<button ng-if="!vm.hasFruit()" ng-click="vm.selectFruit()">Choice fruit</button>
<p ng-if="vm.hasFruit()">You choice <span ng-bind="vm.fruit"></span></p>
<async-choice ng-if="vm.selectMode" select-fruit="vm.setFruit(fruit)"></async-choice>
</wrapper>
</div>

How to call a controller function inside AngularJS directive

Controller in page :
(function () {
'use strict';
angular.module('LVS').controller('LVSCtrl', LVSCtrl);
function LVSCtrl($scope) {
$scope.OnChange = function() {
// do
}
}
})();
This is my directive code
My Directive code :
(function () {
'use strict';
angular.module('LVS')
.directive('taEmp', taEmp);
function taEmp() {
return {
restrict: 'E',
scope: {
ngModel: '=',
ngDisabled: '=',
ngReadonly: '=',
ngChange: '&',
},
templateUrl: 'app/pages/ESS-TA/Common/Directives/TAEmpPicker.html',
}
})();
My Directive in page :
<ta-emp ng-model="empCode" ng-change="OnChange()"></ta-emp>
My directive not call function in controller

I made it work by using $watch inside your directive and parsing an controller function as param into it. The function gonna be executed once the input value has changed.
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.name = '';
$scope.someFunction = function (data) {
console.log(data);
};
});
myApp.directive('myDirective', function () {
return {
restrict: 'E',
scope: {
model: '=ngModel',
function: '='
},
template: '<input type="text" ng-model="model" function="function" my-directive>',
link: function (scope, element, attrs) {
scope.$watch('model', function (newValue, oldValue) {
if (newValue && newValue !== oldValue) {
if (typeof scope.function === 'function') {
scope.function('test');
}
}
}, true);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<my-directive ng-model="name" function="someFunction"></my-directive>
</div>

Why after remove directive "person" instance of class still exists?

I spent more time for understand why instance of class after remove directive does not destroy. I wrote the following code. Please help me to resolve it. Code provide below. The result in the console log!!
'use strict';
var app = angular.module('app', []);
app.controller('mainController', function($scope, Service) {
$scope.service = Service;
$scope.checkAll = function () {
$scope.service.triggerListener('update');
};
$scope.add = function () {
$scope.count.push({});
};
$scope.object = {
updateAll: function () {
console.log('Count of directive "person"');
}
};
$scope.removeElement = function () {
$scope.count.splice(0, 1);
};
$scope.count = [0, 1, 2, 3, 4];
});
app.service('Service', function() {
this.listeners = [];
this.addListeners = function (object, event, callback) {
if (!this.listeners.hasOwnProperty(event)) {
this.listeners[event] = [];
}
this.listeners[event].push(object[callback]);
};
this.triggerListener = function(event) {
if (this.listeners.hasOwnProperty(event)) {
for (var i = 0; i < this.listeners[event].length; i++) {
this.listeners[event][i]();
}
}
};
});
app.directive('person', function() {
var directive = {
restrict: 'E',
template: '<button id="{{vm.index}}">Person</button> ' +
'<button ng-click="vm.add(index)">add</button>' +
'<button ng-click="vm.removeElement(index)">Clear</button>',
scope: {
index: '=',
service: '=',
removeElement: '&',
object: '=',
add: '&'
},
controller: function() {
},
link: function (scope) {
scope.vm.service.addListeners(scope.vm.object, 'update', 'updateAll');
},
controllerAs: 'vm',
bindToController: true
};
return directive;
});
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<div ng-repeat="item in count">
<person add="add()" index="$index" service="service" object="object" remove-element="removeElement()" show="show()">{{$index}}</person>
</div>
<button ng-click="checkAll()">Count of "person" directive</button>
</body>
</html>

Your directive only adds to the listeners array ... but there is nothing in your code to remove anything from that array
You need a removeListener method that would be called in the removeElement method.
$scope.removeElement = function () {
var index = // get index of element
$scope.count.splice(index, 1);
Service.removeListener(index);
};
In service:
this.removeListener = function(index){
this.listeners.splice(index,1);
};
Alternatively you could use $destroy event in directive:
link: function (scope) {
Service.addListeners(scope.vm.object, 'update', 'updateAll');
scope.$on('$destroy', function(){
Service.removeListener(scope.index);
});
},
Note that injecting Service into directive is simpler and cleaner than passing it through html attributes to scope
app.directive('person', function(Service) {

Call function in controller from a nested directive

I have two nested directives for building a treeview in Angular:
Parent directive:
myApp.directive('nodes', function() {
return {
restrict: "E",
replace: true,
scope: {
nodes: '='
},
template: "<ul><node ng-repeat='node in nodes' node='node'></node></ul>"
}
});
Child directive:
myApp.directive('node', function($compile) {
return {
restrict: "E",
replace: true,
scope: {
node: '='
},
template: "<li>{{node.ObjectName}}</li>",
link: function(scope, element, attrs) {
if (angular.isArray(scope.node.Children)) {
element.append("<nodes nodes='node.Children'></nodes>");
$compile('<nodes nodes="node.Children"></nodes>')(scope, function(cloned, scope) {
element.append(cloned);
});
}
}
}
});
The controller:
function myController($scope, DataService) {
$scope.init = function() {
DataService.getData(0, 0).then(function(data) {
$scope.treeNodes = $.parseJSON(data.d);
});
}
$scope.focusNode = function(prmNode) {
console.log(prmNode);
}
}
HTML:
<div ng-app="testTree" ng-controller="myController">
<div ng-init="init()">
<nodes nodes='treeNodes'></nodes>
</div>
</div>
My question is how can I implement a click on the <li> which will call the "focusNode" function in the controller?

You could pass in the function through an attribute.
Javascript
var myApp = angular.module('myApp', []);
myApp.directive('nodes', function() {
return {
restrict: "E",
replace: true,
scope: {
nodes: '=',
clickFn: '&'
},
template: "<ul><node ng-repeat='node in nodes' node='node' click-fn='clickFn()'></node></ul>"
}
});
myApp.directive('node', function($compile) {
return {
restrict: "E",
replace: true,
scope: {
node: '=',
clickFn: '&'
},
template: "<li><span ng-click='clickFn()(node)'>{{node.ObjectName}}</span></li>",
link: function(scope, element, attrs) {
if (angular.isArray(scope.node.Children)) {
element.append("<nodes nodes='node.Children' click-fn='clickFn()'></nodes>");
$compile('<nodes nodes="node.Children" click-fn="clickFn()"></nodes>')(scope, function(cloned, scope) {
element.append(cloned);
});
}
}
}
});
function myController($scope) {
$scope.focusNode = function(prmNode) {
console.log(prmNode);
}
$scope.root = {
ObjectName: 'Root',
Children:[{
ObjectName: 'A',
Children: [{
ObjectName: 'B'
}, {
ObjectName: 'C'
}]
}]
};
}
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.8" src="http://code.angularjs.org/1.2.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app='myApp' ng-controller="myController">
<node node="root" click-fn="focusNode"></node>
</body>
</html>

Since I can't comment until I get 50 rep cred :(...
I just wanted to add that I also got an error when trying the plunkr that W.L.Jared shared above. To fix the error, I changed the controller from a global function to:
angular.module('myApp').controller('myController', function($scope){...})
The error went away.
Good answer though :) Exactly what I was looking for.

Using a promise for retrieving data inside angular directive

I am working on hiding or showing elements based on user role from an api. The directive works when I set the data.roleName in the code but when I try to set it by I service I need to resolve a promise before loading the rest of the directive though I keep getting "cannot read property of undefined errors Here's the code.
.js
app.directive('restrictTo', ['SecuritySvc', function (SecuritySvc) {
return {
restrict: 'EA',
replace: true,
transclude: true,
scope: {},
controller: ['$scope', '$attrs', '$q', 'SecuritySvc', function ($scope, $attrs, $q, SecuritySvc) {
var defer = $q.defer();
defer.promise.then(function ($scope, SecuritySvc) {
$scope.data = SecuritySvc.getRole();
});
defer.resolve();
if ($scope.data.roleName == $attrs.restrictTo) {
$scope.allowed = true;
} else {
$scope.allowed = false;
}
console.log($scope.data);
}],
template: '<div ng-show="{{ $scope.allowed }}" ng-transclude></div>'
}
}]);
.html
<div restrict-to="customer">
<div class="hero-unit">
<h1>Welcome!</h1>
<p>Hello, valued customer</p>
</div>
</div>
<div restrict-to="Admin">
<div class="hero-unit">
<h1>Admin Tools</h1>
<p>This shouldn't be visible right now</p>
</div>
</div>

If you dont want to use Q/defer and are using $resource you can do it this way:
app.directive('restrictTo', ['SecuritySvc', function (SecuritySvc) {
return {
restrict: 'AE',
replace: true,
transclude: true,
scope: {},
controller: ['$scope', '$attrs', 'SecuritySvc', function ($scope, $attrs, SecuritySvc) {
$scope.allowed = false;
SecuritySvc.getMyRole().$promise.then(function (data,attrs) {
if (data.roleName == $attrs.restrictTo) {
$scope.allowed = true;
} else {
$scope.allowed = false;
}
});
}],
template: '<div ng-show="allowed" ng-transclude></div>'
};
}]);

Not sure what your SecuritySvc is or returns. I think you should do it in a way like this:
var defer = $q.defer();
defer.resolve(SecuritySvc.getRole());
defer.promise.then(function (data) {
$scope.data = data;
if ($scope.data.roleName == $attrs.restrictTo) {
$scope.allowed = true;
} else {
$scope.allowed = false;
}
console.log($scope.data);
});