angularjs-directive | 易学教程

Angular 1.2.24: Testing directive throws undefined in scope.$digest();

阅读更多关于 Angular 1.2.24: Testing directive throws undefined in scope.$digest();

问题 I've just installed AngularJS 1.2.24 and I'm trying to test my directive. The code looks like follows: describe('scenarios', function () { var scope, compile; beforeEach(module("app")); beforeEach(module("src/widgets/tt-header/header.html")); beforeEach(inject(function ($compile, $rootScope) { scope = $rootScope.$new(); compile = $compile; })); function directive() { var el = angular.element('<div tt-header />'); compile(el)(scope); scope.$digest(); return el; } it('should load the directive'

ui-codemirror placed within custom directives fails without an error

阅读更多关于 ui-codemirror placed within custom directives fails without an error

问题 I am trying to use ui-codemirror angular directive from code mirror angular library and the use case is that I have to place it within a custom directive . But when I place it within a custom directive I am unable to see the code mirror in the text area. infact the text area becomes non editable . But when I place it outside the custom directive it works as expected . I am attaching the fiddle code for this http://plnkr.co/edit/NVFuumrGq2FJ8d8EC8Xn?p=preview . I have no option to even debug

How can an Angular directive compile() function access an isolated scope?

阅读更多关于 How can an Angular directive compile() function access an isolated scope?

问题 I have the following directive: angular.module("example_module", []) .directive("mydirective", function() { return { scope: { data: "@mydirective" } compile: function(element) { element.html('{{example}}'); return function($scope) { $scope.example = $scope.data + "!"; }; } }; }); and the following HTML code: <!DOCTYPE html> <html ng-app="example_module"> <head> <meta charset="utf-8"> <title>Example title</title> <script src="lib/angular/angular.min.js"></script> <script src="js/example.js"><

Angularjs use custom interpolation symbols for scope

阅读更多关于 Angularjs use custom interpolation symbols for scope

问题 I currently have an underscore.js template that I would also like to use with angular and still be able to use with underscore. I was wondering if it's possible to change the interpolation start and end symbols for a particular scope using a directive, like this: angular.directive('underscoreTemplate', function ($parse, $compile, $interpolateProvider, $interpolate) { return { restrict: "E", replace: false, link: function (scope, element, attrs) { $interpolateProvider.startSymbol("<%=")

Need help in creating network graph using visjs in angularjs

阅读更多关于 Need help in creating network graph using visjs in angularjs

I need help in making this plunker work something similar to this vis example in angularjs. I am using <vis-network data="data" options="options"></vis-network> tag and below data and options data var nodes = [ {id: 1, label: 'Node 1'}, {id: 2, label: 'Node 2'}, {id: 3, label: 'Node 3'}, {id: 4, label: 'Node 4'}, {id: 5, label: 'Node 5'} ]; var edges = [ {from: 1, to: 3}, {from: 1, to: 2}, {from: 2, to: 4}, {from: 2, to: 5} ]; $scope.data = VisDataSet({ nodes: nodes, edges: edges }); options $scope.options = { autoResize: true, height: '100%', width: '100%' }; There is no console error, what

AngularJS only shows last Element in ng-repeat

阅读更多关于 AngularJS only shows last Element in ng-repeat

I've got a strange behaviour using flexslider to render a bunch of galleries. As shown below I've got an array of several objects that conclude an array of images. When I "render" the galleries, all galleries appear but only the last one shows its images. On all galleries the indicator for the number of images in that particular, as well as the title and link, are correct, but the images are missing. Do I do something(/a lot) wrong here? Here is my code: $scope.galleries = [{title: 'gallery1', 'link': 'http://...', elements: ['img/img1.jpg','img/img2.jpg']}, {title: 'gallery2', 'link': 'http:/

How to insert $compile'd HTML code inside the directive without getting $digest recursion error?

阅读更多关于 How to insert $compile'd HTML code inside the directive without getting $digest recursion error?

I have a directive that, depending on the ng-repeat item data (from the database), build custom HTML with a switch case: app.directive('steps', function($compile){ return { 'restrict': 'A', 'template': '<h3>{{step.name}}</h3><ul ng-repeat="opt in step.opts"><div ng-bind-html-unsafe="extra(opt)"></div></ul>', 'link': function($scope, $element){ $scope.extra = function(opt){ switch ($scope.step.id){ case 1: return "<div>Some extra information<select>...</select></div>" case 2: return "<div><input type='checkbox' ng-model='accept'> Accept terms</div>" case 3: return "<div>{{step.title}}<select

Set model value programmatically in Angular.js

阅读更多关于 Set model value programmatically in Angular.js

I'm an author of angular-input-modified directive. This directive is used to track model's value and allows to check whether the value was modified and also provides reset() function to change value back to the initial state. Right now, model's initial value is stored in the ngModelController.masterValue property and ngModelController.reset() function is provided. Please see the implementation . I'm using the following statement: eval('$scope.' + modelPath + ' = modelCtrl.masterValue;'); in order to revert value back to it's initial state. modelPath here is actually a value of ng-model

Angular directive with scope.$watch to force validation of other fields

阅读更多关于 Angular directive with scope.$watch to force validation of other fields

问题 I've written a match-model Angular directive that I use for password/password-repeat process when users register in my application. Password repeat field has this particular attribute that validates this field against original password field. My directive has scope.$watch for optimization purposes because I don't have to read related scope property value each time I validate my repeat password scope property but I rather just use cached value which changes when related scope property value

Change image src based on ng-click index AngularJS

阅读更多关于 Change image src based on ng-click index AngularJS

问题 I have this angularJS code, the directive template defines: <li ng-repeat="i in getNum(myNum)" ng-click="toggle($index)" id=$index> <img src="img/{{ImgTest}}"> </li> Also, my directive code has : link: function (scope, elem, attrs) { scope.ImgTest= "Img_1"; On an ng-click I wish to change the image on all the <li> elements before the one clicked from Img_1 to Img_2. (So change all the <li> elements with an index between 0 and the $index of the one clicked). How can this be achieved ? ..