angularjs-directive | 易学教程

How to pass NgModelController to directive controller?

阅读更多关于 How to pass NgModelController to directive controller?

Can i pass NgModelController to directive controller? That's required so i can assign values to model in controller. This example does not work: angular .module('directives.selectBox', []) .directive('selectBox', selectBox); function selectBox() { return { restrict : 'E', require : 'ngModel', scope : { list : '=', }, replace : true, templateUrl : 'common/directives/selectBox/selectBox.html', controller : SelectBoxController, }; } function SelectBoxController(ngModel) { ngModel.$setViewValue(10); // ??? } Robba Pretty simple actually, what you need to do is to get access to the element by

AngularJS Custom Directive Two Way Binding

阅读更多关于 AngularJS Custom Directive Two Way Binding

If I have an AngularJS directive without a template and I want it to set a property on the current scope, what is the best way to do it? For example, a directive that counts button clicks: <button twoway="counter">Click Me</button> <p>Click Count: {{ counter }}</p> With a directive that assigns the click count to the expression in the two way attribute: .directive('twoway', [ '$parse', function($parse) { return { scope: false, link: function(scope, elem, attrs) { elem.on('click', function() { var current = scope.$eval(attrs.twoway) || 0; $parse(attrs.twoway).assign(scope, ++current); scope.

Check existence of attribute in Angular Directive

阅读更多关于 Check existence of attribute in Angular Directive

Is is possible to check whether a given attribute is present in a directive, ideally using isolate scope or in a worst case scenario the attributes object. With a directive that looked something like this <project status></project> , I want to conditionally render a status icon, but only if the status attribute is present. return { restrict: 'AE', scope: { status: '@' }, link: function(scope, element, attrs) { scope.status === 'undefined' } } Ideally, it would be bound straight to the scope, so that it could be used in the template. However, the bound variable's value is undefined . The same

Angular.js filters and functions on scope that is changing every second

阅读更多关于 Angular.js filters and functions on scope that is changing every second

问题 The problem. I have a table of entries( $scope.entries ), each row(ng-repeat) with 5 columns, 2 of those columns have custom made filter for various transformations. Now in the same scope I have active_entry( $scope.active_entry ), which is changing every seconds, because of it and how angular works(I guess), the whole scope is being constantly checked and my filters executed. This causes Watch Expressions in Batarang to go sky high over the time. How can I use create some sort of isolated

AngularJS - Modular forms with directives

阅读更多关于 AngularJS - Modular forms with directives

I originally asked this question here , but I think I got ahead of myself and made it more complicated than it really is, so I'm re-asking it here with a bit clearer wording. How do you create re-usable form widgets with directives and re-useable parameters? Like this: <form> <special-input label-text="A Special Input" bind-to="data.special"></special-input> <special-input label-text="Specialer" bind-to="data.moreSpecial"></special-input> </form> Directive templates don't seem to allow interpolation on ng-model. Furthermore, can you modularize and parameterize form behavior so that you can

ng-select with an object and its properties in angularjs

阅读更多关于 ng-select with an object and its properties in angularjs

I have been trying to figure out how to use an array if objects as the key values for an ng-select directive this is the data I want to use $scope.selectValues [ {name: "Options 1", value: "11"}, {name: "Options 2", value: "22"} {name: "Options 3", value: "33"} ]; and I want the output to be <select> <option value="11">Options 1</option> <option value="22">Options 2</option> <option value="33">Options 3</option> </select> Can anyone explain how to do this ? and show a an example of the directive set up? I have looked at the docs but they don't have an example that fits for the this model. ng

AngularJS: Custom directive using dynamic attribute value doesn't work inside “ng-repeat”

阅读更多关于 AngularJS: Custom directive using dynamic attribute value doesn't work inside “ng-repeat”

Could you explain please why the following directive doesn't work? attrs.ngMydirective seems to be undefined inside the linking function. Live example here HTML: <body ng-controller="MyCtrl"> <ul> <li ng-repeat="person in people"> {{ person.name }} <span ng-mydirective="{{ person.age }}"></span> </li> </ul> </body> JS: var app = angular.module('myApp', []); app.directive('ngMydirective', function() { return { replace: true, link: function(scope, element, attrs) { if (parseInt(attrs.ngMydirective, 10) < 18) { element.html('child'); } } }; }); app.controller('MyCtrl', function($scope) { $scope

custom attribute type directive to set the background color of c3 chart

阅读更多关于 custom attribute type directive to set the background color of c3 chart

问题 I am using Wasil C3 angularjs directives (http://wasil.org/angularjs-directive-for-c3-js-tutorial) and there is also a sample plunker through compilation (http://plnkr.co/edit/wiiUMk2KoHHrK4D1HdNu?p=preview). As need to set the back ground color of the sub chart, I am trying to create a custom attribute directive (subChartBgColor), so that on which ever chart I want to set back ground color of the sub chart I can simple put the attribute sub-chart-bg-color on Html tag, but some how it is not

Password matching in AngularJS using the $validators pipeline produces unexpected results

阅读更多关于 Password matching in AngularJS using the $validators pipeline produces unexpected results

问题 See the example here. Using the $validators pipeline, I am trying to check that a field contains the same value as another field. Each input in this example is associated with the other, such that the expected result is as follows: Enter a value in input#1 Enter same value in input#2 Both fields should now be valid Alter the value in input#1 input#1 should be invalid (or input#2 or both) Initially, I did this using a $watch on both the current model and the target to be equal to, so only one

Passing ng-model in nested directives

阅读更多关于 Passing ng-model in nested directives

I want to pass my ng-model from the 'outer-directive' to an 'inner-diretive' (which is contained in the outer-directive template). What is the correct way for doing it? HTML code: <body> <outer-directive ng-model="prop" /> </body> and directive code: angular.module('app', []).directive('outerDirective', function(){ return { template: '<inner-directive ng-model="prop" />', link: function() { ... } } }); You can set up a bi-directional binding (see the documentation , section "Directive Definition Object") with the variable in ngModel attribute, as with any other directives: <my-directive ng