angularjs-directive | 易学教程

Angularjs setValidity causing modelValue to not update

阅读更多关于 Angularjs setValidity causing modelValue to not update

问题 I'm having some basic trouble with a form. Here's what I did. I snagged this cool looking directive from here: https://github.com/TheSharpieOne/angular-input-match It looks like this: directive('match', function () { return { require: 'ngModel', restrict: 'A', scope: { match: '=' }, link: function(scope, elem, attrs, ngModel) { scope.$watch(function() { return (ngModel.$pristine && angular.isUndefined(ngModel.$modelValue)) || scope.match === ngModel.$viewValue; }, function(currentValue,

Can multiple directives for one element share an isolated scope?

阅读更多关于 Can multiple directives for one element share an isolated scope?

问题 Two directives on the same element can not both have isolated scope, but can they both use the same scope isolated from their parent? And can they both use properties bound to the isolated scope? For example, if I have two directives on an element <e-directive a-directive prop="parentProp"/> And one directive defines an isolated scope with a bound property App.directive('eDirective', function() { return { restrict: 'E', scope: { localProp: '=prop' }, ... }; }); Does the other directive get

AngularJS: 'Template for directive must have exactly one root element' when using 'th' tag in directive template

阅读更多关于 AngularJS: 'Template for directive must have exactly one root element' when using 'th' tag in directive template

问题 I'm trying to implement custom sortBy directive in order to make columns in html table sortable. HTML: <thead> <tr> <sort-by-directive ng-repeat="header in headers" onsort="onSort" sortdir="filterCriteria.sortDir" sortedby="filterCriteria.sortedBy" sortvalue="{{ header.value }}">{{ header.title }} </sort-by-directive> </tr> </thead> JS: angular.module('mainApp.directives').directive('sortByDirective', function () { return { templateUrl: 'SortHeaderTemplate', restrict: 'E', transclude: true,

Testing element directive - can't access isolated scope methods during tests

阅读更多关于 Testing element directive - can't access isolated scope methods during tests

问题 I have the following directive. directivesModule.directive('wikis', function() { var urlRegex = new RegExp('^(https?)://.+$'); return { restrict: 'E', templateUrl: 'templates/wiki-list.html', scope: { wikis: '=' }, link: function(scope, element, attrs) { scope.newWikiURL = ''; scope.$watch('wikis', function() { if (scope.wikis == undefined || scope.wikis.length === 0) { scope.class = 'hide'; } else { scope.class = 'show'; } }, false); scope.addWiki = function() { if (scope.wikis == undefined)

Angular JS render JSON in tree like format

阅读更多关于 Angular JS render JSON in tree like format

问题 How do I render JSON in tree like way just like http://jsonviewer.stack.hu/ does using angular JS? 回答1: The technique you are interested in is ' recursive directive '. If you don't know how to write a directive yet, then you should start learning it first. The official Angular JS doc got a lot better in explaining about directive Creating Custom Directives Once you know how to write custom directive, you can learn about recursive directive. I found this Google Groups thread helpful: Recursive

AngularJS Directive element method binding - TypeError: Cannot use 'in' operator to search for 'functionName' in 1

阅读更多关于 AngularJS Directive element method binding - TypeError: Cannot use 'in' operator to search for 'functionName' in 1

问题 This is the controller of the main template: app.controller('OverviewCtrl', ['$scope', '$location', '$routeParams', 'websiteService', 'helperService', function($scope, $location, $routeParams, websiteService, helperService) { ... $scope.editWebsite = function(id) { $location.path('/websites/edit/' + id); }; }]); This is the directive: app.directive('wdaWebsitesOverview', function() { return { restrict: 'E', scope: { heading: '=', websites: '=', editWebsite: '&' }, templateUrl: 'views/websites

AngularJS directive with method called from outside

阅读更多关于 AngularJS directive with method called from outside

问题 I created a directive with a method that should be called from other elements that are not part of the directive. However it looks like this method is not exposed. Some example jade code to clarify: //- a controller for the view itself div(ng-controller="someController") //- this is part of the view itself, not within the directive div(ng-repeat="element in elements") div(ng-click="methodFromDirective(element)") click element {{$index}} to trigger directive //- this is the directive div(some

AngularJS directive - setting order for multiple directive elements (not priority for directives, but priority for the elements)

阅读更多关于 AngularJS directive - setting order for multiple directive elements (not priority for directives, but priority for the elements)

Considering this markup with a directive "foo": <div foo run="3"></div> <div foo run="1"></div> <div foo run="2"></div> What is a good approach for causing "foo" to run in the specified order rather than from top to bottom (3,1,2)? The only thing I can think to do would be tracking what has run and returning false on the items that are not in order, then making angular try to run them all again and repeat until they are all done. That sounds terrible to me though, because it would have to repeat so many times... Does Angular have something built-in that can be used? Is there an ideal approach

AngularJS directives - best practices when using ngModel with jQuery widget

阅读更多关于 AngularJS directives - best practices when using ngModel with jQuery widget

问题 Here is my problem. For example, we have the following directive, which uses some jQuery widget behind the scenes : module.directive('myWidget', [function() { return { require: "ngModel", restrict: "A", replace: true, templateUrl: "templates/myWidget.html", link: function(scope, element, attrs, ctrl) { element.widget_name().on('value_updated', function(event) { scope.$apply(function() { var newModelValue = event.some_value; ctrl.$setViewValue(newModelValue); }); }); scope.$watch(attrs[

List registered custom directives in AngularJS

阅读更多关于 List registered custom directives in AngularJS

I am writing a web app with many custom directives. Is there a way to view all the directives that have been registered for each module? Modules have an _invokeQueue, which contains the contents of the module. A function like this: function Directives(module) { var directives = []; var invokes = angular.module(module)._invokeQueue; for (var i in invokes) { if (invokes[i][1] === "directive") directives.push(invokes[i][2]); } return directives; } will run through the module and grab each element in the invoke queue that are tagged as directives. Here is a fiddle where you can play with it. EDIT: