I have a directive element:
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<ul>' +
'<li ng-show="hideItem">Home</li>' +
'<li ng-show="hideItem">Products</li>' +
'<li ng-show="!hideItem">Cart</li>' +
'<li ng-show="hideItem">Contact Us</li>' +
'</ul>',
link: function(scope, element, attrs) {
var shouldHide = myService.getData();
if (shouldHide === true) {
scope.hideItem = true
}
}
};
The link function performs a call to a service, the result is either true or false.
If true, i want hideItem to be set to true within my ng-show.
HTML structure:
<section ng-controller="NavigationController">
<i class="home"></i>
<i class="bell"></i>
<i class="phone"></i>
<my-directive></my-directive>
<button>Submit</button>
</section>
DEMO
you can actually just vm.hideItem = myService.getData(); since you want the boolean's value anyway
return {
restrict: 'E',
replace: true,
controllerAs: 'vm',
transclude: true,
template: '<ul>' +
'<li ng-show="vm.hideItem">Home</li>' +
'<li ng-show="vm.hideItem">Products</li>' +
'<li ng-show="!vm.hideItem">Cart</li>' +
'<li ng-show="vm.hideItem">Contact Us</li>' +
'</ul>',
link: function(scope, element, attrs, vm) {
vm.hideItem = myService.getData();
},
controller: function(){
}
};
I added controllerAs: 'vm' it's much more manageable by assigning a name to your controller and attach variables to it
You have to watch it :
scope.$watch(function(){
return myService.getData();
}, function(newValue){
scope.hideItem = newValue;
});
This is only if your service is not doing server-side requests, otherwise you'll spam the server.
I think getData method can be called from anywhere in your application.
And you want to keep track of these changes in your directive. In this case, you can use the callback.
Live example on jsfiddle.
angular.module('ExampleApp', [])
.controller('ExampleController', function($scope, myService) {
$scope.resolve = function() {
myService.getData().then(function() {
console.log('resolved from button resolve');
})
}
myService.getData().then(function() {
console.log('resolved from controller loading');
})
})
.directive('exampleDirective', function(myService) {
return {
restrict: "E",
scope: {
value: "="
},
template: `<div>hidden={{hidden}} value={{value}} <span ng-show="hidden">ng-show="hidden"</span><span ng-show="!hidden">ng-show="!hidden"</span></div>`,
link: function(scope) {
scope.hidden = false;
myService.addCallback(function(hideItem) {
scope.hidden = hideItem;
console.log('callback resolved with value ' + scope.value + ' and hide is ' + hideItem);
});
}
}
})
.service('myService', function($q, $timeout) {
var callbacks = [];
return {
getData: function() {
var defered = $q.defer();
//simulate $http call
$timeout(function() {
defered.resolve();
//simulate answer from server
var res = Math.round(Math.random() * 10) >= 5;
angular.forEach(callbacks, function(c) {
//call callback with result
$q.resolve(res, c);
});
}, 1000);
return defered.promise;
},
addCallback: function(callback) {
callbacks.push(callback);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleController" id="ExampleController">
<button ng-click="resolve()">
call getData
</button>
<example-directive value="12"></example-directive>
<example-directive value="'ab'"></example-directive>
</div>
</div>
When you anywhere using the method of your getData directive knows that.
Related
I've lost my bearings with regards to why I can't pass updates to my directives.
What I'm trying to accomplish with the following piece of code is to be able to set focus on by pressing a button. The problem is however that the "focus" binding on drInput only ever is set when the directive have loaded when it should change whenever it changes in drWrap. How come and how do I get around this?
And now, ladies and gentlemen, I present to you: THE CODE!
<div ng-app="myApp">
<dr-wrap></dr-wrap>
</div>
var myApp = angular.module('myApp', []);
myApp.directive('drWrap', function($timeout) {
return {
scope: {
focus: '=?bind'
},
restrict: 'E',
replace: 'true',
template: '<div><button ng-click="openSearch()">focus</button><dr-input focus="focusSearch" /></div>',
link: function(scope, elem, attr){
scope.openSearch = function(){
$timeout(function(){
scope.focusSearch = true
alert('scope.focusSearch 2 = ' + scope.focusSearch)
}, 1000)
}
}
};
})
.directive('drInput', function() {
return {
scope: {
focus: '=?bind'
},
restrict: 'E',
replace: 'true',
template: '<input type="test" focus-me="{{ focus }}" />',
link: function(scope, elem, attr){
scope.$watch('focus', function(value){
if(value != undefined){
scope.focus = value
alert('scope.focus = ' + scope.focus)
}
})
}
};
})
.directive('focusMe', ['$timeout', function ($timeout) {
return {
link: function (scope, element, attrs) {
attrs.$observe('focusMe', function(value){
if ((value === true) || (value == 'true')) {
$timeout(function () {
element[0].focus()
scroll(element[0])
})
} else {
element[0].blur()
}
})
}
}
}])
And the FIDDLE!
https://jsfiddle.net/L56rdqLp/168/
When you write scope: { focus: '=?bind' }, this means that the attribute name should be bind but not focus, so the template of drWrap should look like:
template: '<div><button ng-click="openSearch()">focus</button><dr-input bind="focusSearch" /></div>'
Add ngBlur event handler to drInput directives input like:
template: '<input type="test" focus-me="{{ focus }}" ng-blur="focus = false"/>',
to change the model to false, when input has lost its focus.
Here is working fiddle.
I am trying to implement a system of reddit-like nested comments with reply fields hidden with ng-show.
However when I attempt to return the comment from a custom directive into the controller, the result is always 'undefined'.
I've followed this tutorial:
How to get the form data when the form is in a directive in Angular?
but it's not working for me.
app.directive("replyContainer", function() {
return {
restrict: "E",
scope: {
onSubmit: "&"
},
template: '<a ng-click="replyForm = !replyForm">reply</a>' +
'<div ng-show="replyForm" id="replyForm">' +
'<form ng-submit="submit()" ng-transclude'+
'ng-show="isLoggedIn()"'+
'style="margin-top:30px;">'+
'<h3>Reply</h3>'+
'<div class="form-group">'+
'<input type="text" '+
'class="form-control"'+
'placeholder="Comment"'+
'parent="{{comment._id}}"'+
'<script>console.log(parent)</script>'
'ng-model="model.Name"></input>'+
'</div>'+
'<button ng-click="submit()"'+
'class="btn btn-primary">Reply</button>'+
'</form>'+
'</div>',
transclude: true,
link: function(scope, element, attributes) {
scope.submit = function() {
scope.onSubmit();
}
}
}
})
app.controller('PostsCtrl', ['$scope', 'posts', 'post', 'auth',
function($scope, posts, post, auth) {
$scope.model = {};
$scope.submittedValue = null;
$scope.post = post;
$scope.isLoggedIn = auth.isLoggedIn;
$scope.replyForm = false;
$scope.addReply = function (){
$scope.submittedValue = $scope.model.Name;
console.log($scope.parent);
};
index.ejs:
<reply-container on-submit="addReply()"></reply-container>
i am using angularjs-ui tabs in my app.
angular.module('bootstrap.tabset', [])
.directive('tekplntabsets',['tabsetServ', function (tabsetServ) {
return {
restrict: 'E',
replace: true,
transclude: true,
controller: function ($scope) {
$scope.templateUrl = '';
var tabs = $scope.tabs = [];
var controller = this;
this.selectTab = function (tab) {
angular.forEach(tabs, function (tab) {
tab.selected = false;
});
tab.selected = true;
tabsetServ.setTabId(tab.tabid);
};
this.setTabTemplate = function(templateUrl) {
$scope.templateUrl = templateUrl;
};
this.setTabController = function(tabCtrl) {
$scope.tabCtrl = tabCtrl;
};
this.getTabController = function() {
return $scope.tabCtrl;
};
this.removeTab = function(tab) {
var index = tabsetServ.removeTab(tab);
this.selectTab(tabs[index - 1]);
};
this.addTab = function (tab) {
if (tabs.length == 0) {
controller.selectTab(tab);
}
tabs.push(tab);
controller.selectTab(tab);
};
},
template:
'<div class="row-fluid flexbox flexboxContent divHeight100">' +
'<div class="row-fluid">' +
'<div class="nav nav-tabs" ng-transclude></div>' +
'</div>' +
'<div class="row-fluid flexbox flexboxContent divHeight100">' +
'<ng-include src="templateUrl" class="flexbox flexboxContent divHeight100" ></ng-include>' +
'</div>' +
'</div>'
};
}])
.directive('tekplntab', function () {
return {
restrict: 'E',
replace: true,
require: '^tekplntabsets',
scope: {
title: '#',
templateUrl: '#',
tabid: '#',
closable: '#',
tabicon: '#',
controller:'#'
},
link: function (scope, element, attrs, tabsetController, $route) {
tabsetController.addTab(scope);
scope.select = function () {
tabsetController.selectTab(scope);
};
scope.$watch('selected', function () {
if (scope.selected) {
tabsetController.setTabTemplate('');
tabsetController.setTabTemplate(scope.templateUrl);
// scope.$apply();
//$route.reload();
//if (scope.$parent.tektab.ctrl !== "" && scope.$parent.tektab.ctrl !== "DashboardCtrl") {
// var ctrl = scope.$parent.tektab.ctrl;
// scope.$parent.tektab.ctrl = "";
// scope.$parent.tektab.ctrl = ctrl;
//}
//if (scope.$root.$$phase !== '$digest' && scope.$$phase !== '$digest') {
// scope.$apply();
// }
//scope.$watch('scope.tabid', function (randomValue) {
// scope.$apply();
//}); ng-controller="{{controller}}"
}
});
scope.removeTab = function (id) {
tabsetController.removeTab(id);
};
},
template:
'<li ng-class="{active: selected}" >' +
'<a href="" ng-click="select()"><div class="pointerDiv {{ tabicon }}" ng-show="{{closable}}"></div> {{ title }} ' +
'<button ng-click="removeTab(title)" class="TabClose" ng-show="{{closable}}">x</button></a>' +
'<input type="hidden" value="{{ tabid }}"></input>' +
'</li>'
};
});
When I am using this directive to open 2 tabs that use different controllers it works well.
The problem occurs when I want to switch between 2 tabs that using same controller. (for example, when I open 2 different projects and I want to switch between project number 1 and project number 2, the tab does not load all the data from project number 2 !!).
I don't want to use angular-ui-router.
project 1 and project 2 uses same partial html
I managed to solve the problem by using Boradcasting messages
I need some help on how to pass controllers definitions to inner directive nested in outer directive. Please see http://plnkr.co/edit/Om2vKdvEty9euGXJ5qan for a (not)working example.
Is there any way to make angular interpolate what is passed on script.js#46 as item.ctrlName?
How to use controllerAs syntax in inner directive?
1) if you need the inner directive to have the parent controller you can use the require params on the inner directive. Something like this
angular.module('docsTabsExample', [])
.directive('outer', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: '...', // or template
controllerAs: 'outer',
bindToController: true, // This bind the scope with the controller object
controller: function(scope, element, attrs) {
}
}
})
.directive('inner', function() {
return {
require: '^outer',
restrict: 'E',
transclude: true,
scope: {
title: '#'
},
controllerAs: 'inner',
bindToController: true, // This bind the scope with the controller object
templateUrl: '...', // or template
controller: function(scope, element, attrs, tabsCtrl) {
// tabsCtrl and all the methods on the outer directive
},
};
});
2) You have set controller: controller and controller is a empty function, but you can set there a function like i did before and make sure of put the bindToController: true
I found the solution going step down (up ?) with the abstraction. I'm dynamically constructing the whole directive configuration object and then lazy registering it.
See http://plnkr.co/edit/pMsgop6u51zPLqkfWaWT
angular.module('app', ['moduleLazyLoader'])
.controller('mainCtrl', ['$log', function ($log) {
this.list = [
{
name: 'asd',
ctrl: [
'ItemAsdCtrl',
function () {
$log.debug('ItemAsdCtrl');
}
]
},
{
name: 'xyz',
ctrl: [
'ItemXyzCtrl',
function () {
$log.debug('ItemXyzCtrl');
}
]
}
];
}])
.directive('outer', ['factoryLazyLoader', '$log', '$compile', function (factoryLazyLoader, $log, $compile) {
function controller () {}
return {
restrict: 'E',
controller: controller,
controllerAs: 'outer',
bindToController: true,
scope: {
list: '=list'
},
link: function (scope, element, attributes) {
var directives = [];
scope.outer.list = scope.outer.list.map(function (ele, idx) {
var directiveSuffix = ele.ctrl[0];
directiveSuffix[0].toUpperCase();
var directiveName = 'item' + directiveSuffix,
directiveAttrName = directiveName.split(/(?=[A-Z])/).join("-").toLowerCase();
directives.push(directiveAttrName);
factoryLazyLoader.registerDirective([
directiveName,
function () {
return {
restrict: 'E',
replace: true,
controller: ele.ctrl[1],
controllerAs: ele.ctrl[0],
bindToController: true,
template: '<div>{{' + ele.ctrl[0] + ' | json}}</div>',
scope: {
item: '=item'
}
}
}
])
return ele;
});
var tpl = '<div>';
angular.forEach(directives, function (val, idx) {
tpl += '<' + val +' item="outer.list[' + idx + ']">' + '</' + val + '>';
});
tpl += '</div>'
// debugger;
element.replaceWith($compile(tpl)(scope))
}
};
}])
I am trying to modify the last example (Create Components) on http://angularjs.org/ so that when switching the tab, the url will change. The complete code:
angular.module('components', [])
.directive('tabs', function ($location) {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: function ($scope, $element) {
var panes = $scope.panes = [];
$scope.$watch(function () {
return $location.path();
}, function (url) {
//select pane
});
$scope.select = function (pane) {
angular.forEach(panes, function (eachPane, key) {
eachPane.selected = false;
if (pane == eachPane) {
if (key == "1") {
$location.path("Pluralization");
} else {
$location.path("Localization");
}
}
});
pane.selected = true;
};
this.addPane = function (pane) {
panes.push(pane);
console.log("addPane");
if (panes.length == 2) {
if ($location.path() == "/Pluralization") {
$scope.select(panes[1]);
} else {
$scope.select(panes[0]);
}
}
}
},
template:
'<div class="tabbable">' +
'<ul class="nav nav-tabs">' +
'<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">' +
'{{pane.title}}' +
'</li>' +
'</ul>' +
'<div class="tab-content" ng-transclude></div>' +
'</div>',
replace: true
};
})
.directive('pane', function () {
return {
require: '^tabs',
restrict: 'E',
transclude: true,
scope: {
title: '#'
},
link: function (scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
template:
'<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
'</div>',
replace: true
};
})
angular.module('app', ['components'])
.controller('BeerCounter', function ($scope, $locale) {
$scope.beers = [0, 1, 2, 3, 4, 5, 6];
if ($locale.id == 'en-us') {
$scope.beerForms = {
0: 'no beers',
one: '{} beer',
other: '{} beers'
};
} else {
$scope.beerForms = {
0: 'žiadne pivo',
one: '{} pivo',
few: '{} pivá',
other: '{} pív'
};
}
});
It works all well except if user uses clicks go back history button, the content doesn't change. I've got
$scope.$watch(function () {
return $location.path();
}, function (url) {
//select tab according to url
});
to watch the url change but can't get it work. My logic is when url changes (by go back button) pane should be selected according to the url. Also I think this part
if (panes.length == 2) {
if ($location.path() == "/Pluralization") {
$scope.select(panes[1]);
} else {
$scope.select(panes[0]);
}
}
shouldn't be in addPane()
Anyway, I'm new to Angular and if you think there is a better way to do this please let me know.