angularjs-directive | 易学教程

AngularJS - inner directive - Order of postLink function calls change when I am replacing template property with templateUrl property

阅读更多关于 AngularJS - inner directive - Order of postLink function calls change when I am replacing template property with templateUrl property

问题 I have a weird situation. If I have an outer directive that contains 2 directives inner-directive1 - has a template defined. inner-directive2 - has a templateUrl defined. The inner-directive1 postLink function is being called before the outer-directive postLink function - as expected. But, the inner-directive2 poslink function is being called after the outer-directive postLink - NOT as expected. The calls to the postLink function are : inner-directive1, outer-directive, inner-directive2 and I

How do you access an ng-repeat item in a directive's scope?

阅读更多关于 How do you access an ng-repeat item in a directive's scope?

问题 How do you set the scope value for something like this: <div ng-controller="MyCtrl"> <my-element ng-repeat="p in people" person='p'></my-element> </div> var myApp = angular.module('myApp',[]); myApp.directive('myElement', function(){ return { restrict: 'E', template: '<div>{{ name }}</div> <div>{{ age }}</div>' } }); function MyCtrl($scope) { $scope.people = [{ name: 'Mike', age: 20 },{name: 'Peter', age: 22 }]; } 回答1: If by "set the scope value" you mean have the template work, then template

Angular directive: using ng-model within isolate scope

阅读更多关于 Angular directive: using ng-model within isolate scope

问题 I'm having trouble working out how I can define a custom directive that both: Uses isolate scope, and Uses the ng-model directive in a new scope within in its template. Here's an example: HTML: <body ng-app="app"> <div ng-controller="ctrl"> <dir model="foo.bar"></dir> Outside directive: {{foo.bar}} </div> </body> JS: var app = angular.module('app',[]) .controller('ctrl', function($scope){ $scope.foo = { bar: 'baz' }; }) .directive('dir', function(){ return { restrict: 'E', scope: { model: '='

If else conditions in angularjs templates

阅读更多关于 If else conditions in angularjs templates

问题 I am quite new to AngularJs. I am working on a Q&A Application where i have to render some questions and its answers in the form of a table. I have three Types of questions which I have to render in a different way. Every question has a type assigned with it. If question.type is "MCQ" then the options or its answer should be rendered with HTML checkbox, and if question type is NUM its answers should be rendered with radio buttons. i tried this and use if conditions in AngularJs Template. my

Directive display ng-model input value as currency in angular

阅读更多关于 Directive display ng-model input value as currency in angular

问题 I want to display Currency sign with decimal value in my input field. If model value is set to 2 it should display $ 2.00 while model value should remain numeric. I have created a directive that do so but if load value from server where value is set in model then it display $ 2.00 and model value is also string while i need numeric.After googling many posts i have found this soln but it is in angular 1. How it can be converted in angular 2? I need exactly same behavior: Fiddle My directive is

angularjs - passing data between controllers

阅读更多关于 angularjs - passing data between controllers

问题 I am building an angular app using modals and I'd like to pass some data between my controllers to populate my modal view. My main controller is JobListCtrl and callReportModalData is triggered when I click on the link supposed to call the modal. I use the service reportJobModalData to store the data an pass it between controllers. var myApp = angular.module('myApp', []); myApp.controller('JobListCtrl', ['$scope', '$element', '$http', '$log', 'reportJobModalData', function ($scope, $element,

Angularjs directive add directives as attribute and bind them dynamically

阅读更多关于 Angularjs directive add directives as attribute and bind them dynamically

问题 Hi i am working on directive where i need to edit DOM add ng-src attribute and a model to it. This is my DOM <edit-component> <img src="images/logo.png" title="Hearty Wear" /> </edit-component> I need the result DOM be `<div> <img src="images/logo.png" title="Hearty Wear" ng-src={{myModel}} /> </div> ` Such that when i update myModel with data the image should be updated UPDATE sam.directive('editComponent', function() { return { restrict: 'EA', transclude: true, replace: true, templateUrl:

Send a number value from one component to another component in Angular2

阅读更多关于 Send a number value from one component to another component in Angular2

问题 I had searched but failed to integrate then in my project. **Problem:**I have to send a variable contains number,to a component.ts from component.ts . Note: I don't want that value in HTML page. Below i have given a sample example,how i want the data!! child.component.ts =================== export class Child{ x:number;   onButtonClick(){ x=5; } } parent.component.ts =============

Angular 1.0.1 vs 1.3.0 for directives

阅读更多关于 Angular 1.0.1 vs 1.3.0 for directives

问题 I build a simple directive with isolated scope.But it working fine with Version 1.0.1 but not in 1.3.0.What is the problem suppose to be ? Angular 1.0.1 Version example : http://jsfiddle.net/k2rnavrg/ Angular 1.3.0 Version example :http://jsfiddle.net/k2rnavrg/2/ var myModule = angular.module('myModule', []) .directive('qImg', function () { return { restrict: 'E', scope: { m: '=mF' } }; }) .controller('MyCtrl', ['$scope', function ($scope) { $scope.foo = 'Hello Samitha!'; }]); 回答1: You must

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"