angularjs-directive | 易学教程

How to render html formatted content in ng-grid?

阅读更多关于 How to render html formatted content in ng-grid?

问题 I have jsonData which consist of HTML content. I want to render that HTML in ng-grid. The content is not rendered however -- it only shows up in normal string format. Below is the plnkr which shows all the code: http://plnkr.co/edit/RlWyDqCUUR15dmLM7ePV?p=preview 回答1: There's a few things going on here: Not related to your exact issue, but you've got nested single quotes in your firstName field. You need to do some escaping or your ng-click expression is going to break. So instead of ng-click

angular input formatter/parser directive and interpolated attributes?

阅读更多关于 angular input formatter/parser directive and interpolated attributes?

I am attempting to write a configurable directive that is applied to an input element, which requires ngModel, and which adds a parser and a formatter function for ngModel. The problem I'm having is that I can't seem to pass interpolated values into the directive while simultaneously supporting ngModel binding. For instance, I want to be able to use my directive in one of two ways: passing literal arguments: <input ng-model="foo" my-directive="120" /> or passing interpolated arguments from the current scope: <input ng-model="foo" my-directive="{{bar}}" /> ... function MyCtrl($scope) { $scope

How to handle Highcharts events from an AngularJS directive?

阅读更多关于 How to handle Highcharts events from an AngularJS directive?

问题 Using an AngularJS directive, I am able to load a Highcharts graph. However, my event handler for clicking on a point is not being executed. http://plnkr.co/edit/pxU0IsBTrvcEwr2Znf5d?p=preview JS var app = angular.module('charts', []); app.directive('highchart', function () { return { restrict: 'E', template: '<div></div>', replace: true, link: function (scope, element, attrs) { scope.$watch(function() { return attrs.chart; }, function() { if(!attrs.chart) return; var chart = JSON.parse(attrs

Getting ngModelController of the input

阅读更多关于 Getting ngModelController of the input

问题 I need to access ngModelController of input element to check is it dirty or pristine. I've managed to do it with directive which grabs ngModel of input to data object associated with element, making it obtainable from anywhere: app.directive("input", [ function () { return { restrict: "E", replace: false, scope: false, require: "ngModel", link: function (scope, element, attrs, ctrls) { element.data('ngModelController', ctrls); } } }]) I know it could be modified to make directive as attribute

How do I synchronize the scroll position of two divs using AngularJS?

阅读更多关于 How do I synchronize the scroll position of two divs using AngularJS?

问题 I have seen and used jQuery for synchronized scrolling, but for my current project am forced to find an Angular solution wherever possible. Unfortunately, I am not having any luck finding the "Angular way" for this problem. Put simply, I need my top div (table header) to scroll horizontally in sync with my bottom div (table body). The two divs are children of a wrapper div. The first child is the slave, the second is the master, but I'm not sure what goes into the function to link the slave

Compare two fields in angularjs directive

阅读更多关于 Compare two fields in angularjs directive

问题 I am trying to create directive which can be used to compare two fields in multiple projects. MarkUp : <div class="form-group"> <input ng-model="user.password" type="password" name="password" /> </div> <div class="form-group"> <input ng-model="user.confpassword" ng-compare="password" name="confpassword" type="password" /> <p ng-show="registrationform.password.$error.ngcompare" class="help-block">Password's don't match</p> Directive : "use strict"; angular.module('app.directive.ngCompare', [])

Calculate average from list of values in JSON

阅读更多关于 Calculate average from list of values in JSON

I have a simple ng-repeat that displays a list of values (financial income). How can i calculate the average from this list? <div ng-repeat="data in MyData"> {{ data.income }} </div> <div> Average: </div> Which displays: 11 14 8 9 21 10 2 1 5 13 Thanks thomasnu In HTML Average: {{calculateAverage(MyData)}} Code $scope.calculateAverage = function(MyData){ var sum = 0; for(var i = 0; i < MyData.length; i++){ sum += parseInt(MyData[i], 10); //don't forget to add the base } var avg = sum/MyData.length; return avg; }; You'll have to write a function which takes as argument the integer array and

In AngularJS, how to force the re-validation of a field in a form when another value in the same form is changed?

阅读更多关于 In AngularJS, how to force the re-validation of a field in a form when another value in the same form is changed?

问题 I have a form with few fields, however a select and an input field are coupled: the validation on the input depends on which value the user chooses in the select field. I'll try to clarify with an example. Let's say that the select contains names of planets: <select id="planet" class="form-control" name="planet" ng-model="planet" ng-options="c.val as c.label for c in planets"></select> in the input I apply custom validation via a custom directive named "input-validation": <input id="city"

Inserting directives into HTML in AngularJS?

阅读更多关于 Inserting directives into HTML in AngularJS?

问题 I'm fairly new to AngularJS and trying to think the Angular way. Right now I'm working on an app that has different features that register in an angular service called FeatureRegistry . From there they are taken and inserted into a sidebar from an FeatureSelectionController . By clicking on a feature the startFeature() function of the appropriate feature should be invoked, and after that the feature should be added to the main view (but where should this DOM manipulation occur?). So there is

watch ng-model inside directive

阅读更多关于 watch ng-model inside directive

问题 I have the following directive: directive('myInput', function() { return { restrict: 'AE', scope: { id: '@', label: '@', type: '@', value: '=' }, templateUrl: 'directives/dc-input.html', link: function(scope, element, attrs) { scope.disabled = attrs.hasOwnProperty('disabled'); scope.required = attrs.hasOwnProperty('required'); scope.pattern = attrs.pattern || '.*'; } }; }); with the following template: <div class="form-group"> <label for="input-{{id}}" class="col-sm-2 control-label">{{label}}