angularjs-directive | 易学教程

AngularJS ngRepeat element removal

阅读更多关于 AngularJS ngRepeat element removal

问题 There are quite a few questions on how to implement item removal inside ngRepeat directive, and as I figured out, it comes down to using ngClick and triggering some remove function passing it item's $index . However, I couldn't find anywhere an example where I have multiple ngRepeats: <div ng-controller="MyController"> <div ng-repeat="email in user.emails"> {{ email }} <a href>Remove</a> </div> <div ng-repeat="phone in user.phones"> {{ phone }} <a href>Remove</a> </div> </div> For this, I

How to test AngularJS directives

阅读更多关于 How to test AngularJS directives

问题 I am working on a Rails 3.2 app that will be using AngularJS. I can get Angular to do what I need, but I am having a very difficult time figuring out how to test what I'm doing. I am using guard-jasmine to run Jasmine specs using PhantomJS. Here is the (relevant) html: <html id="ng-app" ng-app="app"> <div id="directive-element" class="directive-element"> </div> </html> The javascript (in coffeescript) looks like: window.Project = App: angular.module('app', []) Directive: {} Project.Directive

Google-like search box with an AngularJS directive

阅读更多关于 Google-like search box with an AngularJS directive

I am writing an application which UI wise is almost exactly like Google. I arrive at landing page I have a search box which on submit directs you to results page. Here you have the same search box and other directives in which you can switch between modes: eg. web, image. Currently I have: on landing page: form with action="results.html" which passes the parameters in the url. <form name="search" role="form" action="results.html"> <div class="input-group input-group-search"> <input type="text" class="form-control" ng-model="blab" name="q" required> <span class="input-group-addon"> <button

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', function () { var el = directive(); expect(el).not.toBe(undefined); }); }); Then, when I run the test

How much of a performance difference is between template and templateUrl Angularjs

阅读更多关于 How much of a performance difference is between template and templateUrl Angularjs

How much is there a performance difference between template and templateUrl? Currently I am using template in all my directives, but because I am obsessed with performance, I would like to now, which is faster. And if I use templateUrl + $templateCache, is this faster then only using template in directives? I was asking myself the #1 question of your post another day. As no one else answered it before, and I do not have enough rep to post a comment, here are my findings after a few tests. The best answer for your first question is that with templateURL you will have the overhead of the lazy

AngularJS ng-model value is lost after custom validation directive is triggered

阅读更多关于 AngularJS ng-model value is lost after custom validation directive is triggered

I created a custom validation directive and used it in a form. It can be triggered with no problem, but after the validation is triggered, I found that the model value is just lost. Say I have ng-model="project.key" and after validation, project.key doesn't exist in the scope anymore. I think somehow I understood AngularJS wrong and did something wrong. Code speaks. Here is my html page: <div class="container"> ... <div class="form-group" ng-class="{'has-error': form.key.$invalid && form.key.$dirty}"> <label for="key" class="col-sm-2 control-label">Key</label> <div class="col-sm-10"> <input

Angular “=” scope does not work with camelCase

阅读更多关于 Angular “=” scope does not work with camelCase

I'm scope property of a directive It works fine when I use show as attr name. <span ng-repeat="field in fields"> <field-pill field="field" show="true"></field-pill> </span> app.js angular.module('app',[]); angular.module('app') .controller('AppCtrl', function($scope){ $scope.fields = [1,2,3,4]; }); angular.module('app') .directive('fieldPill', function () { return { template: '<div class="pill">{{field}}:{{show}}--<span ng-show="show">x</span></div>', restrict: 'E', scope:{ field: "=", "show": "=" } }; }); (See this plunkr http://plnkr.co/edit/AcqmxeCerCOtGaw9dq9t?p=preview ) But the directive

AngularJs pass instance of each ng-repeat in HTML to directive

阅读更多关于 AngularJs pass instance of each ng-repeat in HTML to directive

I'm thinking this should be simple but I'm missing something. How can I pass a flowObj in my ng-repeat below to my Directive? I want to pass it to my directive then on click use that FlowObj then apply some logic. I tried using the commented code in my directive scope: { test:"@" } But it seems to screw up my css . HTML: <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div id="center_outer"> <div id="center_inner" ng-controller="CtrlPageFlow"> <div flowclick class="cflow" ng-repeat="flowObj in flows" > {{flowObj.name}} </div> <

Can I use Angular variables as the source of an audio tag?

阅读更多关于 Can I use Angular variables as the source of an audio tag?

I am trying to do the following: <div ng-repeat="audio in event.audios"> <audio ng-src="/data/media/{{audio}}" controls></audio> </div> But when I load the view, the {{audio}} variable is not parsed but hardcoded into the source as is. However, if for example, I place that same variable outside of the audio tag it renders the name of the audio file correctly. I've tried using both src and ng-src to no avail. Is there a way to get the variable to work within an audio tag? Thanks in advance. theJoeBiz I'm not all that familiar with the ngSrc directive outside of using it on images, but it might

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 ? .. Thanks We can use an ng-switch that is controlled by a variable I'm calling switchPoint , switchPoint is set