angularjs-directive | 易学教程

How to pass ng-click executable action (&) in variable into directive?

阅读更多关于 How to pass ng-click executable action (&) in variable into directive?

问题 HTML view with directive: <div click aaa="aaa()" action="action"></div> Controller: I like to pass function bbb() in $scope.action: app.controller('MainCtrl', function($scope) { $scope.aaa = function () { alert('aaa'); } $scope.bbb = function () { alert('bbb'); } $scope.action = 'bbb()'; }); Directive: app.directive('click', function () { return { scope: { aaa: '&', action: '&' }, template: '<button ng-click="aaa()">show aaa (work ok)</button>' + '<button ng-click="action">show bbb (not work)

Why does two way binding sometimes work without using a dot in Angular?

阅读更多关于 Why does two way binding sometimes work without using a dot in Angular?

问题 Consider this fiddle: Fiddle 1 When you select a date, you will notice that the text above it is not updating. This is because I had to use an object in my list, like this: Fiddle 2 (simplified). But, on the other hand, this does work, without a dot: Fiddle 3 Could someone explain what the difference is between fiddle 1 and fiddle 3? I've read about prototypical inheritance (unerstanding scopes), but I don't understand this behavior. Fiddle 3: HTML: <div ng-controller="MyCtrl"> Hello, {{name}

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'

Uncaught Error: [$rootScope:infdig] when implementing an elapsed time calculator

阅读更多关于 Uncaught Error: [$rootScope:infdig] when implementing an elapsed time calculator

问题 I am getting this error in the browser console in my code for an elapsed time calculator: Uncaught Error: [$rootScope:infdig] I calculate the elapsed time from the current time when the app starts. Here is my html: <div ng-app="time"> <div ng-controller="Ctrl2"> Elapsed time: <span my-current-time="[date,format]"></span> </div> </div> Here is the JavaScript code: function Ctrl2($scope) { $scope.date = new Date(); $scope.format = 'M/d/yy h:mm:ss a'; } angular.module('time', []) // Register the

AngularJS - Create a directive that adds a sibling element

阅读更多关于 AngularJS - Create a directive that adds a sibling element

问题 I'm creating a my-validate directive that looks something like this <input my-validate="customValidation" ng-model="model" /> What I want to do is to attach a sybling element to the directive like this Error template: <ul class"errors"> <li ng-repeat="for error in errors">{{error}} not valid</li> </ul> errors is defined in the scope of the directive. I've added the error template in the compile function, but the problem I have is that the scope in the link function is not the same as the

How to conditionally include script element in Angular

阅读更多关于 How to conditionally include script element in Angular

问题 I'm trying to conditionally include a chat on my page: <body ng-app="myApp">  <script type="text/javascript" ng-if="expression"> window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s= d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set. _.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8"); $.src="//v2.zopim.com/?my-zopim-id";z.t=+new Date;$. type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script

If 'ng-template' is a Web Component then add “CUSTOM_ELEMENTS_SCHEMA” to the of this component to suppress this message. ("[ERROR ->]<ng-template>

阅读更多关于 If 'ng-template' is a Web Component then add “CUSTOM_ELEMENTS_SCHEMA” to the of this component to suppress this message. ("[ERROR ->]

问题 zone.js@0.6.25?main=browser:355 Unhandled Promise rejection: Template parse errors: 'ng-template' is not a known element: 1. If 'ng-template' is an Angular component, then verify that it is part of this module. 2. If 'ng-template' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->] ; Task: Promise.then ; Value: Error: Template parse errors: 'ng-template' is not a known element: I have applied this FIX in my

Why does angularjs bootstrap datepicker pick one day before?

阅读更多关于 Why does angularjs bootstrap datepicker pick one day before?

问题 I'm using angularjs bootstrap datepicker directive and when I set a date from model it picks a day before the selected date. <button type="button" class="btn btn-sm btn-default" ng-click="dt = '2014-09-24'">2014-09-24</button> Here is a plunk with the issue. Is there any solution? 回答1: This is due to the way JS handles dates natively. AngularUI team mentions this in the docs. Here's one solution: Angular-UI One day is subtracted from date in ui-date 回答2: For anyone needing a solution in the

Setting attribute value of an element in camelCase using a directive

阅读更多关于 Setting attribute value of an element in camelCase using a directive

问题 I'm trying to add an attribute to an angularJs element from a directive like this: element.attr('startOffset', val); But when I check the element, the attribute added is 'startoffset' where the 'o' is not a capital letter. Is there any way to add an attribute to an element and keep the case of the word intact? Thanks 回答1: If you set an attribute using jqliteWrapper .attr or even with direct DOM operation .setAttribute it will lowercase the attribute name, before attaching to the element. When

Upgrade AngularJs 1.5 to 1.6 - which exact bindings are affected by change in $compile reg controller instances?

阅读更多关于 Upgrade AngularJs 1.5 to 1.6 - which exact bindings are affected by change in $compile reg controller instances?

问题 Documentation for a change in $compile when upgrading from AngularJs 1.5 to 1.6 states: pre-assigning bindings on component/directive controller instances is disabled by default, which means that they will no longer be available inside the constructors. — AngularJS Developer Guide - Migrating to V1.6 - $compile The upgrade example in the documentation is as follows (shortened): Before .component('myComponent', { bindings: {value: '<'}, controller: function() { //... } }) After .component(