angularjs-directive

问题 Let's say we have some nested directives: <big-poppa> <baby-bird></baby-bird> </big-poppa> And let's say that big-poppa wants to create a component that all of his children directives can share. It would be nice to put it in the controller, but this component needs the DOM, so it needs to be build in the link function. Then let's say the baby-bird component wants to read from component. Maybe it wants to listen to events from it, maybe send it a command or two. The challenge is that

问题 I have created a directive and used it to make two time counters however I am a bit confused about how I can use different scope items for each time counter. I have made a Plunkr to illustrate. I am not sure whether I should be adding to scope items to the mainCtrl controller or the directives scope. And if I add it to the directives scope then how can I make that apart of mainCtrl so that it could later be saved? hopefully the plunker is a bit clearer. 回答1: You need to declare an isolate

问题 I am trying to achieve a directive that would be used to accept only alphabets into the text box i.e from a-z or A-z I did try to do this by, angular.module('myApp', []).directive('alphabetsOnly', function(){ return { require: 'ngModel', link: function(scope, element, attrs, modelCtrl) { modelCtrl.$parsers.push(function (inputValue) { if (inputValue == undefined) return '' var transformedInput = inputValue.replace(/^[a-zA-Z]+$/, ''); if (transformedInput!=inputValue) { modelCtrl.$setViewValue

问题 I have a partial HTML page in an AngularJS app that I'm trying to add a vimeo video to. This template has an image and play button that fades out on click to show the underlying iFrame. I also want this click trigger to play the video, so that someone doesn't have to press two play buttons. The div in my partial page template where this is happening working version of site here: <div id="container" > <div id="dummy"></div> <div id="element"> <iframe id="player" class="fade {{playerFade}}" ng

问题 I've created a directive for a select input to select a userId. The model binds from the directive to the rest of the view. However, when I set the id from the controller it doesn't seem to bind to select input in the directive. Controller: app.controller('MainCtrl', function($scope) { // set userId to willem's Id $scope.userId = 3; }); Directive: app.directive('selectUser', function() { return { restrict: 'E', scope: { ngModel: '=' }, controller: function($scope) { $scope.users = [{ "id": 1,

问题 I am building an app using MEAN.js generators and a tutorial I found online. Here I have a datepicker in one of my Angular views. For now I would like the ng-change directive to be recognized and do something. At the moment when I make a change to the date my test alert shown here does not get called. <div class="form-group"> <label class="control-label" for="statusdate">Status Date</label> <div class="controls"> <input type="date" ng-change="alert('something')" data-ng-model="statusDate" id=

问题 I am building an app using MEAN.js generators and a tutorial I found online. Here I have a datepicker in one of my Angular views. For now I would like the ng-change directive to be recognized and do something. At the moment when I make a change to the date my test alert shown here does not get called. <div class="form-group"> <label class="control-label" for="statusdate">Status Date</label> <div class="controls"> <input type="date" ng-change="alert('something')" data-ng-model="statusDate" id=

问题 I want to have some interaction of the label for a field with the field validation properties. I created a plunker of a working example. http://plnkr.co/edit/oNq5lmjtjRDaEkzKsrR2?p=preview But in this example the fieldname is hardcoded. I tryed to set the fieldname via scope variable into the template. This is not working: http://plnkr.co/edit/yEl04xyFR5RWYCmI2bMH?p=preview HTML: <form name="myForm" ng-controller="ctrl"> <fieldset field-name="{{model.fieldName}}" label-text="{{model.label}}"

问题 First of all, the way i am doing may not be correct. But i will explain the problem: 1) I am creating directive called as < firstDirective > 2) when the clicks on a button in the first directive, then I am trying to insert the second directive dynamically at runtime As follows: <!DOCTYPE html> <html> <script src="lib/angular/angular.js"></script> <body ng-app="myApp"> <first-directive></first-directive> <script> var app = angular.module("myApp", []); app.directive("firstDirective", function()

问题 First of all, the way i am doing may not be correct. But i will explain the problem: 1) I am creating directive called as < firstDirective > 2) when the clicks on a button in the first directive, then I am trying to insert the second directive dynamically at runtime As follows: <!DOCTYPE html> <html> <script src="lib/angular/angular.js"></script> <body ng-app="myApp"> <first-directive></first-directive> <script> var app = angular.module("myApp", []); app.directive("firstDirective", function()