angularjs-directive | 易学教程

Call jquery plugin in directive only after data is renderer in DOM

阅读更多关于 Call jquery plugin in directive only after data is renderer in DOM

问题 I want to initialize a jquery plugin in an angular directive but only after the service data is returned and first renderer in the DOM. I can seem to figure out how to do this in angular directive. I have this code so far, but it seems that i am calling the plugin after the service data arrived, but before it is renderer on the DOM... Any hints? myApp.directive('myDirective', function () { return { restrict: 'A', link: function ($scope, element, attrs) { $scope.$watch("data.length", function(

Including angular templates on one external .html

阅读更多关于 Including angular templates on one external .html

In angular, you can create a template in the page itself like: <script type="text/ng-template" id="something.htm"> <div>This is a template.</div> </script> I'm wondering if you can take a bunch of these and put them together in an external page, like "templates.htm", and then reference the entire page, essentially saying "look in templates.htm for the template something.htm." If you don't mind a little decrease in performance, here is a working example for what I have said in the comment. Example: http://plnkr.co/edit/EcEySnmmm3hsLimDHfYr?p=preview The key concept is to remove the np-app and

Angularjs- adding/removing dynamic html elements (dropdown)

阅读更多关于 Angularjs- adding/removing dynamic html elements (dropdown)

问题 here is my code- http://plnkr.co/edit/oTWXbLIKOxoGTd4U0goD?p=preview why is the days dropdown does not data bind with scope.demoDays , it is always empty? is this the correct way to add dropdown dynamically? If user adds 5 dropdown, how to get the results , will ng-model="selectedDay" create an array of selection? any suggestions? Thank you var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope, $compile) { var counter = 0; $scope.fields = []; $scope.days =['Day',

Show image / background on md-select / md-options on hover in AngularJS 1.6

阅读更多关于 Show image / background on md-select / md-options on hover in AngularJS 1.6

I'm trying to put a hover on AngularJS material md-select dropdown where in on hover it shows a image next to it in a div / span . I'm unising the below code but still it's not coming: <md-select id="{{mapping.id}}" ng-model="mapping.value"> <md-option ng-value="option" ng-mouseenter="show = true" ng-mouseleave="show = false" ng-repeat="map in mapping.values" ng-selected="$first">{{maping.options[$index]}}</md-option> <span ng-show="show"> <img src="{{mapping.image[$index]}}" align-"right" width="60px" height="40px" vertical-align="top"/> </span> </md-select> and using the below in app: scope

Tell child directive to act after a parent directive has done DOM actions?

阅读更多关于 Tell child directive to act after a parent directive has done DOM actions?

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 controllers fire down the dom (first parent, then child), and post-link methods fire the other direction, so the

Nested validation in angular js

阅读更多关于 Nested validation in angular js

问题 i am a new in angular js. i have lost many times for preparing validation. many example has for total form validation. now i have to do the valid scope wise. I have shown my problem graphically below. Here save yellow and red there are two portion, when i will click yellow save button then validation will be fire for red mark scope and when i will click red save button then validation will be fire for total page content. how can i solve this problem? can any one help me? Plunker 回答1: http:/

AngularJS directive to replace text with ng-click in it

阅读更多关于 AngularJS directive to replace text with ng-click in it

问题 I am trying to create a directive in Angular that takes a set of properties manipulates the some text and outputs it to the element. The problem i'm having is I want to have some of the text wrapped in a ng-click which is to call a function from the scope that will in the end open a dialog box. I have created a very simple example here which once working will let me expand on it: http://jsfiddle.net/BEuvE/ app.directive('parseString', function() { return { restrict: 'A', scope: { props: '

angular js two way binding contenteditable via scope attribute

阅读更多关于 angular js two way binding contenteditable via scope attribute

问题 Is it not possible to set value from parent scope to contentEditable directive via isolated scope using two-way binding? Code here: http://jsfiddle.net/bharatwaj/3wTd3/5 HTML: <input ng-model="foo" /> <div contentEditable="true" binding-foo="foo" ng-model="input.name" title="Click to edit"></div> <pre>model = {{input.name}}</pre> JS: angular.module('form-example2', []).directive('contenteditable', function () { return { scope: { isolatedBindingFoo: '=bindingFoo' }, require: 'ngModel', link:

Post a list of selections in an array to server using ng-model

阅读更多关于 Post a list of selections in an array to server using ng-model

I have almost resolved my issue, now just left with sending data to the server. In my scenario, I have a form that has employee details and projects for an employee (can be multiple) Now when the user wants to add projects, he has to click on "Add Projects". This will generate a dropdown on the page with list of projects. This can be any in number. Now when he has selected the projects(say 5) he wil click on submit that will post data to the server. I want all the selections of the dropdownists in an array and send it to save function. HTML Code: <div> <div ng-controller="AlertDemoCtrl">

angularjs form can not refer to input control when input name is array

阅读更多关于 angularjs form can not refer to input control when input name is array

问题 I encounter a problem when testing form validation with angularjs According to angularjs form guide, an input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control. I created test code at plunker, it all works fine untill I change the input name from <input type="number" name="age" ng-model="user.age" max="100" required> <p>{{form1.age.$error}}</p>