Controller and binding async variables - javascript

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>

Related

angular set $scope.value in controller function is not working

I am trying to set a angular variable value in controller function which is created by a directive. Somehow it is not working for some unknown reasons. The value is displayed when set independently but doesn't work when i try to assign value in a controller function.
My code is as below,
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="mainApp">
<div ng-controller="MyController">
<div id="Details" class="Details">{{Details}}</div></br>
<div id="Test" class="Test">
<collection collection='testdata'></collection>
</div>
</div>
</div>
</body>
<script>
var mainApp = angular.module("mainApp", [])
mainApp.directive('collection', function () {
return {
restrict: "E",
replace: true,
scope: {collection: '=', showFn : '&'},
template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>"
}
})
mainApp.directive('member', function ($compile) {
var NewChild = "<li><span ng-click=ShowDetailsFunc()>{{member.TagName}}</span></li>";
return {
restrict: "E",
replace: true,
scope: {member: '=', ShowHideCtrlFunc : '&', ShowDetailsCtrlFunc : '&'},
template: NewChild,
controller: 'MyController',
link: function (scope, element, attrs) {
var collectionSt = '<collection collection="member.children"></collection>';
if (angular.isArray(scope.member.children)) {
$compile(collectionSt)(scope, function(cloned, scope) {
element.attr('xml-path', scope.member.TagPath);
element.append(cloned);
});
scope.ShowDetailsFunc = function() {
scope.ShowDetailsCtrlFunc(element,event);
}
}
}
}
})
mainApp.controller('MyController', function ($scope) {
$scope.testdata = [{"TagName":"MyRootNode","TagPath":">MyRootNode","children":[{"TagName":"LandXML","TagPath":">MyRootNode>ChildItems>LandXML","children":[{"TagName":"Units","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Units","children":[{"TagName":"Imperial","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[1]>Imperial","children":[]},{"TagName":"Project","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Project","children":[]},{"TagName":"Application","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Application","children":[{"TagName":"Author","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[2]>Author","children":[]},{"TagName":"Alignments","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Alignments","children":[]},{"TagName":"Roadways","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Roadways","children":[{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[1]","children":[]},{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[2]","children":[]},{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[3]","children":[]},{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[4]","children":[]},{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[5]","children":[]}]}]}]}]},{"TagName":"Surfaces","TagPath":">MyRootNode>ChildItems>Surfaces","children":[{"TagName":"Surface1","TagPath":">MyRootNode>ChildItems>ChildItems[2]>Surface1","children":[]},{"TagName":"Surface2","TagPath":">MyRootNode>ChildItems>ChildItems[2]>Surface2","children":[]}]}]}]
$scope.Details = "defalut value"
$scope.ShowDetailsCtrlFunc = function(element,event) {
console.log("in function ShowDetailsCtrlFunc");
var myxmlpath = $(element).attr("xml-path")
$scope.Details = getObjects($scope.testdata, 'TagPath', myxmlpath)[0].TagName;
console.log($scope.Details)
//event.stopImmediatePropagation();
};
});
function getObjects(obj, key, val) {
var objects = [];
for (var i in obj) {
if (!obj.hasOwnProperty(i)) continue;
if (typeof obj[i] == 'object') {
objects = objects.concat(getObjects(obj[i], key, val));
} else if (i == key && obj[key] == val) {
objects.push(obj);
}
}
return objects;
}
</script>
</html>
Please help me to understand where i am making mistake and how it can be rectified.
Please help. Many thanks in advance.
The problem is that you are nesting MyController-controller when you create the directives in this circular way. The result is that the $scope.Details gets set on the specific nested scope instead of the one which is presenting the value in the view.
You can solve this by $emit the change which will send the new value upstream and finally reach the presenting scope value.
Here's an example
var mainApp = angular.module("mainApp", [])
mainApp.directive('collection', function () {
return {
restrict: "E",
replace: true,
scope: {collection: '=', showFn : '&'},
template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>"
}
})
mainApp.directive('member', function ($compile) {
var NewChild = "<li><span ng-click=ShowDetailsFunc()>{{member.TagName}}</span></li>";
return {
restrict: "E",
replace: true,
scope: {member: '=', ShowHideCtrlFunc : '&', ShowDetailsCtrlFunc : '&'},
template: NewChild,
controller: 'MyController',
link: function (scope, element, attrs) {
var collectionSt = '<collection collection="member.children"></collection>';
if (angular.isArray(scope.member.children)) {
$compile(collectionSt)(scope, function(cloned, scope) {
element.attr('xml-path', scope.member.TagPath);
element.append(cloned);
});
scope.ShowDetailsFunc = function() {
scope.ShowDetailsCtrlFunc(element);
}
}
}
}
})
mainApp.controller('MyController', function ($scope) {
$scope.testdata = [{"TagName":"MyRootNode","TagPath":">MyRootNode","children":[{"TagName":"LandXML","TagPath":">MyRootNode>ChildItems>LandXML","children":[{"TagName":"Units","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Units","children":[{"TagName":"Imperial","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[1]>Imperial","children":[]},{"TagName":"Project","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Project","children":[]},{"TagName":"Application","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Application","children":[{"TagName":"Author","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[2]>Author","children":[]},{"TagName":"Alignments","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Alignments","children":[]},{"TagName":"Roadways","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Roadways","children":[{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[1]","children":[]},{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[2]","children":[]},{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[3]","children":[]},{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[4]","children":[]},{"TagName":"Roadway","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[5]","children":[]}]}]}]}]},{"TagName":"Surfaces","TagPath":">MyRootNode>ChildItems>Surfaces","children":[{"TagName":"Surface1","TagPath":">MyRootNode>ChildItems>ChildItems[2]>Surface1","children":[]},{"TagName":"Surface2","TagPath":">MyRootNode>ChildItems>ChildItems[2]>Surface2","children":[]}]}]}]
$scope.Details = "defalut value";
$scope.ShowDetailsCtrlFunc = function(element) {
console.log("in function ShowDetailsCtrlFunc");
var myxmlpath = angular.element(element).attr("xml-path")
var detail = getObjects($scope.testdata, 'TagPath', myxmlpath)[0].TagName;
console.log(detail);
$scope.$emit('detailSelected',detail);
//event.stopImmediatePropagation();
};
$scope.$on('detailSelected',function($event, message){
$scope.Details = message;
});
});
function getObjects(obj, key, val) {
var objects = [];
for (var i in obj) {
if (!obj.hasOwnProperty(i)) continue;
if (typeof obj[i] == 'object') {
objects = objects.concat(getObjects(obj[i], key, val));
} else if (i == key && obj[key] == val) {
objects.push(obj);
}
}
return objects;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<script data-require="angularjs#1.6.4" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="mainApp">
<div ng-controller="MyController">
<div id="Details" class="Details">{{Details}}</div></br>
<div id="Test" class="Test">
<collection collection='testdata'></collection>
</div>
</div>
</div>
</body>
</html>

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) {

Value of an angular directive is being set twice

I'm writing an Angular application that implements component approach (a-la Angular2-style). But I faced with a strange problem: when directive have to be set once, it somehow is being set twice. For a numbers in example it does not causes troubles, but for two-way binding with object it does.
There is a code:
Module init
angular.module('myModule', []);
Parent directive
var ParentController = (() => {
function ParentController() {
this._increasableValue = 1;
}
ParentController.prototype.update = function() {
this._increasableValue += 1;
}
Object.defineProperty(ParentController.prototype, "increasableValue", {
get: function() {
return this._increasableValue;
},
enumerable: true,
configurable: true
});
return ParentController;
})()
angular
.module('myModule')
.controller('parentController', ParentController)
.directive('parentDirective', () => {
return {
restrict: 'E',
scope: {},
controller: 'parentController',
controllerAs: 'ctrl',
template: `
<div class="container">
<child-directive inc="{{ctrl.increasableValue}}"></child-directive>
</div>
<button ng-click="ctrl.update()">Update</button>`
}
});
Child directive
var ChildController = (() => {
function ChildController() {}
Object.defineProperty(ChildController.prototype, "increasableValue", {
get: function() {
return this._increasableValue;
},
set: function(value) {
this._increasableValue = value;
console.log(this._increasableValue); // prints twice
},
enumerable: true,
configurable: true
});
return ChildController;
})();
angular
.module('myModule')
.controller('childController', ChildController)
.directive('childDirective', () => {
return {
restrict: 'E',
scope: {
increasableValue: '#inc'
},
bindToController: true,
controller: 'childController',
controllerAs: 'ctrl',
template: `
<div class="container">
<div>{{ctrl.increasableValue}}</div>
</div>`
}
});
bootstrapping
angular.bootstrap(document.getElementById('wrapper'), ['myModule'])
index.html (part)
<div id="wrapper">
<parent-directive>Loading...</parent-directive>
</div>
Why does it happen and what I can do to remove the second call?
Working example: jsfiddle.

Bind a property from one directive to another

I'm trying to use "Component approach" from Angular2 in Angular1, and my directives should send properties to each other. I've written code like this:
Parent directive
angular
.module('myModule')
.controller('parentController', ParentController)
.directive('parentDirective', () => {
return {
restrict: 'E',
scope: {},
controller: 'parentController',
controllerAs: 'ctrl',
templateUrl: 'parent-template.html'
}
});
class ParentController {
constructor() {
this._increasableValue = 0;
setInterval(() => {
this._increasableValue += 1;
})
}
get increasableValue() { return this._increasableValue; }
}
parent-template.html
<div class="container">
<child-directive inc="{{ctrl.increasableValue}}"></child-directive>
</div>
Child directive
angular
.module('myModule')
.controller('childController', ChildController)
.directive('childDirective', () => {
return {
restrict: 'E',
scope: {
increasableValue: '#inc'
},
bindToController: true,
controller: 'childController',
controllerAs: 'ctrl',
templateUrl: 'child-template.html'
}
});
class ChildController {
set increasableValue(value) { this._increasableValue = value; }
get increasableValue() { return this._increasableValue; }
}
child-template.html
<div class="container">
<div>{{ctrl.increasableValue}}</div>
</div>
But the increasableValue freezes on start value and do not changes at all. What should be done to get increasableValue from parent directive and bind it to child?
UPD:
Here is jsfiddle to demonstrate problem (look at the console too).
Yes you right! Problem is how you update your variable.
Angular not know, that value changed, and not call digest loop to update view.
Sample with $inteval service
angular.module('myModule', []);
var ParentController = (() => {
function ParentController($interval) {
this._increasableValue = 1;
var interval = $interval(() => {
this._increasableValue += 1;
console.log(this._increasableValue);
if (this._increasableValue > 20) {
$interval.cancel(interval);
}
}, 1000);
}
Object.defineProperty(ParentController.prototype, "increasableValue", {
get: function () { return this._increasableValue; },
enumerable: true,
configurable: true
});
return ParentController;
})()
var ChildController = (() => {
function ChildController() {}
Object.defineProperty(ChildController.prototype, "increasableValue", {
get: function () { return this._increasableValue; },
set: function (value) { this._increasableValue = value; },
enumerable: true,
configurable: true
});
return ChildController;
})();
angular
.module('myModule')
.controller('parentController', ParentController)
.directive('parentDirective', () => {
return {
restrict: 'E',
scope: {},
controller: 'parentController',
controllerAs: 'ctrl',
template: `
<div class="container">
<child-directive inc="ctrl.increasableValue"></child-directive>
</div>`
}
});
angular
.module('myModule')
.controller('childController', ChildController)
.directive('childDirective', () => {
return {
restrict: 'E',
scope: {
increasableValue: '=inc'
},
bindToController: true,
controller: 'childController',
controllerAs: 'ctrl',
template: `
<div class="container">
<div>{{ctrl.increasableValue}}</div>
</div>`
}
});
angular.bootstrap(document.getElementById('wrapper'), ['myModule'])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div id="wrapper">
<parent-directive>Loading...</parent-directive>
</div>
UPDATE: Or you can simple call $digest function like this
angular.module('myModule', []);
var ParentController = (() => {
function ParentController($scope) {
this._increasableValue = 1;
var interval = setInterval(() => {
this._increasableValue += 1;
console.log(this._increasableValue);
$scope.$digest();
if (this._increasableValue > 5) {
clearInterval(interval);
}
}, 1000);
}
Object.defineProperty(ParentController.prototype, "increasableValue", {
get: function () { return this._increasableValue; },
enumerable: true,
configurable: true
});
return ParentController;
})()
var ChildController = (() => {
function ChildController() {}
Object.defineProperty(ChildController.prototype, "increasableValue", {
get: function () { return this._increasableValue; },
set: function (value) { this._increasableValue = value; },
enumerable: true,
configurable: true
});
return ChildController;
})();
angular
.module('myModule')
.controller('parentController', ParentController)
.directive('parentDirective', () => {
return {
restrict: 'E',
scope: {},
controller: 'parentController',
controllerAs: 'ctrl',
template: `
<div class="container">
<child-directive inc="ctrl.increasableValue"></child-directive>
</div>`
}
});
angular
.module('myModule')
.controller('childController', ChildController)
.directive('childDirective', () => {
return {
restrict: 'E',
scope: {
increasableValue: '=inc'
},
bindToController: true,
controller: 'childController',
controllerAs: 'ctrl',
template: `
<div class="container">
<div>{{ctrl.increasableValue}}</div>
</div>`
}
});
angular.bootstrap(document.getElementById('wrapper'), ['myModule'])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div id="wrapper">
<parent-directive>Loading...</parent-directive>
</div>
It seems that the dragons were in setInterval approach. Changing it to a button with ng-click attribute solved my problem. Here is updated jsfiddle.
I will be grateful if someone explain the root of the problem.

Strange behavior passing scope to directive

I have created a directive below:
html:
<div image-upload></div>
directive:
angular.module('app.directives.imageTools', [
"angularFileUpload"
])
.directive('imageUpload', function () {
// Directive used to display a badge.
return {
restrict: 'A',
replace: true,
templateUrl: "/static/html/partials/directives/imageToolsUpload.html",
controller: function ($scope) {
var resetScope = function () {
$scope.imageUpload = {};
$scope.imageUpload.error = false;
$scope.imageUpload['image_file'] = undefined;
$scope.$parent.imageUpload = $scope.imageUpload
};
$scope.onImageSelect = function ($files) {
resetScope();
$scope.imageUpload.image_file = $files[0];
var safe_file_types = ['image/jpeg', 'image/jpg']
if (safe_file_types.indexOf($scope.imageUpload.image_file.type) >= 0) {
$scope.$parent.imageUpload = $scope.imageUpload
}
else {
$scope.imageUpload.error = true
}
};
// Init function.
$scope.init = function () {
resetScope();
};
$scope.init();
}
}
});
This directive works fine and in my controller I access $scope.imageUpload as I required.
Next, I tried to pass into the directive a current image but when I do this $scope.imageUpload is undefined and things get weird...
html:
<div image-upload current="project.thumbnail_small"></div>
This is the updated code that gives the error, note the new current.
angular.module('app.directives.imageTools', [
"angularFileUpload"
])
.directive('imageUpload', function () {
// Directive used to display a badge.
return {
restrict: 'A',
replace: true,
scope: {
current: '='
},
templateUrl: "/static/html/partials/directives/imageToolsUpload.html",
controller: function ($scope) {
var resetScope = function () {
$scope.imageUpload = {};
$scope.imageUpload.error = false;
$scope.imageUpload['image_file'] = undefined;
$scope.$parent.imageUpload = $scope.imageUpload
if ($scope.current != undefined){
$scope.hasCurrentImage = true;
}
else {
$scope.hasCurrentImage = true;
}
};
$scope.onImageSelect = function ($files) {
resetScope();
$scope.imageUpload.image_file = $files[0];
var safe_file_types = ['image/jpeg', 'image/jpg']
if (safe_file_types.indexOf($scope.imageUpload.image_file.type) >= 0) {
$scope.$parent.imageUpload = $scope.imageUpload
}
else {
$scope.imageUpload.error = true
}
};
// Init function.
$scope.init = function () {
resetScope();
};
$scope.init();
}
}
});
What is going on here?
scope: {
current: '='
},
Everything works again but I don't get access to the current value.
Maybe I'm not using scope: { correctly.
in your updated code you use an isolated scope by defining scope: {current: '=' } so the controller in the directive will only see the isolated scope and not the original scope.
you can read more about this here: http://www.ng-newsletter.com/posts/directives.html in the scope section

Categories

Resources