Passing an entire object with attribute will not work, you have to use dual way binding. Just change binding from @ to = and modify the HTML below to make it work: changes to directive code: // … scope: { listcolumns: “=” }, // … changes to template: <div linkedlist listcolumns=”cashAccountsColumns”></div>
I just posted this to my brand spanking new blog: http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/ Code here: https://github.com/logicbomb/lvlDragDrop Demo here: http://logicbomb.github.io/ng-directives/drag-drop.html Here are the directives these rely on a UUID service which I’ve included below: var module = angular.module(“lvl.directives.dragdrop”, [‘lvl.services’]); module.directive(‘lvlDraggable’, [‘$rootScope’, ‘uuid’, function($rootScope, uuid) { return { restrict: ‘A’, link: function(scope, el, attrs, controller) { console.log(“linking draggable element”); … Read more
My solution was harder to find out here, but easier to implement. I had to change it to the equivalent of (Note that the question mark makes the attribute optional. Prior to 1.5 this apparently wasn’t required). scope: { permissions: ‘@’, myFriends: ‘=?friends’ }
You can reuse ngIf in your own directive like this: /** @const */ var NAME = ‘yourCustomIf’; yourApp.directive(NAME, function(ngIfDirective) { var ngIf = ngIfDirective[0]; return { transclude: ngIf.transclude, priority: ngIf.priority, terminal: ngIf.terminal, restrict: ngIf.restrict, link: function($scope, $element, $attr) { var value = $attr[NAME]; var yourCustomValue = $scope.$eval(value); $attr.ngIf = function() { return yourCustomValue; }; ngIf.link.apply(ngIf, … Read more
You need to move your angular app code below the inclusion of the angular libraries. At the time your angular code runs, angular does not exist yet. This is an error (see your dev tools console). In this line: var app = angular.module(` you are attempting to access a variable called angular. Consider what causes … Read more
OdeToCode posted great service for this stuff. So with this simple directive you can easily preview and even see the progress bar: .directive(“ngFileSelect”,function(){ return { link: function($scope,el){ el.bind(“change”, function(e){ $scope.file = (e.srcElement || e.target).files[0]; $scope.getFile(); }); } } It is working in all modern browsers! Example: http://plnkr.co/edit/y5n16v?p=preview
If you want to follow all the “best practices,” there’s a few things I’d recommend, some of which are touched on in other answers and comments to this question. First, while it doesn’t have too much of an affect on the specific question you asked, you did mention efficiency, and the best way to handle … Read more
This comment is a result of the element transclusion performed by ngRepeat. Looks like it’s been happening nearly since the dawn of time (in angular terms) and will be created whenever a directive asks for element transclusion. While you certainly could wipe it out with direct HTML manipulation, it’s not a safe thing to do. … Read more
what you are doing wrong is readOnly:’@’ this means readOnly will be a string, to make it a js variable try readOnly:’=’ then <div single-view-card read-only=”{{false}}”/> should be <div single-view-card read-only=”true”/> you need to show more code, this can be part of the error but I think there is more
If you require ngModel you can just call $setViewValue on the ngModelController, which implicitly evaluates ng-change. The fourth parameter to the linking function should be the ngModelCtrl. The following code will make ng-change work for your directive. link : function(scope, element, attrs, ngModelCtrl){ scope.updateModel = function(item) { ngModelCtrl.$setViewValue(item); } } In order for your solution … Read more