angularjs-directive

问题 I don't understand how to watch multiple attributes at the same time in the link function, so I create an object with all the parameters and I watch for it. But I noticed that the attribute in the link function is a string and not an object so I'm using angular.fromJson(val). All the example I found just use one parameter Could you explain how to watch multiple attributes? Thanks EDIT : I cannot use attrs parameter because I need to bind the attributes -- i.e., they require interpolation. For

问题 In my controller I've defined $scope.worker which is a plain JS object: { name: 'Peter', phone: 601002003 } I've created a directive: .directive('phoneType', [function () { return { restrict: 'A', link: function (scope, element, attrs) { console.log(attrs); } }; }]) and my HTML looks like this: <span phone-type="worker.phone"></span> How do I pass worker.phone (in this example 601002003) from the controller scope to the directive, so I can create my logic in the link method? attrs.phoneType

问题 In my controller I've defined $scope.worker which is a plain JS object: { name: 'Peter', phone: 601002003 } I've created a directive: .directive('phoneType', [function () { return { restrict: 'A', link: function (scope, element, attrs) { console.log(attrs); } }; }]) and my HTML looks like this: <span phone-type="worker.phone"></span> How do I pass worker.phone (in this example 601002003) from the controller scope to the directive, so I can create my logic in the link method? attrs.phoneType

问题 We are new to angularjs v4. We have a requirement of drilldown charts in google charts. We are using ng2-google-charts directives. We are able to find the select event and updated the data. but chart is not reloading. Could any one please help on this. view: index.html <pre> <br/> <google-chart #drillchart [data]='pieChartData' type="BarChart" (chartSelect)='select($event)'> </google-chart> </pre> Component.ts: pieChartData = { chartType: 'BarChart', dataTable: [ ['Country', 'Poulation'], [

问题 Angular UI, has support only for basic tabs. I wanted to create a directive that would support nested tabs & advanced headings (that can include html). I think, that the best syntax would be <tabs> <tab> <title><i class="myIcon"></i> Title 1</title> <p>Content 1</p> </tab> <tab> <title class="pull-right">Title 2 (Nested)</title> <tab> <title>Title 2.1</title> <p>Content 2.1</p> </tab> <p>Content 2</p> </tab> </tabs> My problem with this approach, is that I would need 2 ng-transclude - one for

问题 Angular UI, has support only for basic tabs. I wanted to create a directive that would support nested tabs & advanced headings (that can include html). I think, that the best syntax would be <tabs> <tab> <title><i class="myIcon"></i> Title 1</title> <p>Content 1</p> </tab> <tab> <title class="pull-right">Title 2 (Nested)</title> <tab> <title>Title 2.1</title> <p>Content 2.1</p> </tab> <p>Content 2</p> </tab> </tabs> My problem with this approach, is that I would need 2 ng-transclude - one for

问题 We know that there are four types of directives: HTML element (E) an attribute on an element (A) a CSS class (C) comment (M) We can use restrict: 'EACM' in a directive. But can someone give a practical example when we need a directive to be element, attribute, css class and comment ? Thanks. 回答1: Basically and really quick : The only real used values are E and A . E is element directive. This is the logical type of restriction to use for directives injecting content ( template or templateUrl

问题 I am making a directive "Tab Slide Out" in AngularJS like this angular.module('myApp',[]).directive('tabSlideOut', ["$window", "$document", "$timeout", function($window, $document, $timeout) { // default settings of a regular tab slide out var defaultSettings = { speed: 300, action: 'click', tabLocation: 'left', top: '200px', left: '50px', fixedPosition: true, positioning: 'absolute', onLoadSlideOut: false } // handler element var handler = angular.element('<a class="handler btn">{{title}}</a

问题 It's not easy to frame this question, so I will try to explain what I want to know with an example: Consider this simple angularjs app : PLUNKER angular.module('testApp', []) .controller('mainCtrl', function($scope) { $scope.isChecked = false; }) .directive("testDirective", function () { return { restrict: 'E', scope: { isChecked: '=' }, template: '<label><input type="checkbox" ng-model="isChecked" /> Is it Checked?</label>'+ '<p>In the <b>directive\'s</b> scope <b>{{isChecked?"it\'s checked"

问题 I'm reading the directives section of the developers guide on angularjs.org to refresh my knowledge and gain some insights and I was trying to run one of the examples but the directive ng-hide is not working on a custom directive. Here the jsfiddle: http://jsfiddle.net/D3Nsk/: <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()"> Does Not Work Here!!! </my-dialog> <div ng-hide="dialogIsHidden"> It works Here. </div> Any idea on why this is happening? Solution Seems that the variable