angular-template

问题 I have a table in which I want to display a table row, which is a component. And also I want to pass data to that component: <table> <th> <td>col 1</td> <td>col 2</td> <td>col 3</td> </th> <tr> <my-component [data1]="data1" [data2]="data2"></my-component> </tr> <tr *ngFor="let item of list"> {{item}} </tr> </table> In my-component , the HTML is a few <td></td> with data rendered from data1 and data2 . But after rendering it, because of <my-component></my-component> my CSS is breaking

问题 I am doing angular and from backend I have data. Data looks like: { name: 'Name', surename: 'Surename', position: 'Goalkeeper' }, { name: 'Name', surename: 'Surename', position: 'Defender' } And in HTML I have: <mat-option *ngFor="let player of players" [value]="player"> <div *ngIf="player.position === 'Goalkeeper'"> {{player.name}} {{player.surename}} ({{player.price}}M) </div> </mat-option> But in result, I get free space after players, who is not in condition ngIf ... In real, looks like:

问题 I have an AngularJS directive whose template file looks like this: path/to/myDirectiveA.template.html : <tr> <td bgcolor='#7cfc00'>Statement</td> <td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td> </tr> It works. The output looks like this: But then I change the template file by adding an ng-repeat like this: <tr ng-repeat="currRow in [0, 1, 2, 3]"> <td bgcolor='#7cfc00'>Statement</td> <td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td> <td bgcolor='#7cfc00'>{{currRow}}</td> </tr> And that

问题 I have the following markup: <table> <thead> <th *ngFor="let column of columnNames"> <ng-container *ngIf="column === 'Column6'; else normalColumns"> {{column}} <input type="checkbox" #chkAll /> </ng-container> <ng-template #normalColumns> {{column}} </ng-template> </th> </thead> <tbody> <tr> <td *ngFor="let model of columnValues"> <ng-container *ngIf="model === 'Value6'; else normal"> {{model}} <input type="checkbox" [checked]="chkAll?.checked" /> </ng-container> <ng-template #normal> {{model

问题 I'm creating a directive that will display and show content by listening to the $routeChangeError event on $rootScope. I got it all to work by inlining the template like this: app.directive("alert", function ($rootScope) { 'use strict'; return { restrict: "E", replace: true, template: '<div class="alert alert-warning alert-dismissable" ng-show="isError">' + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + '{{ message }}' + '</div>', //templateUrl:

问题 When I use *ngIf with a then and/or else statement, why do I have to bind to a template variable that is attached to a ng-template element? For example: This works: <div *ngIf="show; else elseBlock">Text to show</div> <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template> But this does not work: <div *ngIf="show; else elseBlock">Text to show</div> <div #elseBlock>Alternate text while primary text is hidden</div> I also noticed adding a class does not work either:

问题 I'm trying to setup a tab system that allows for components to register themselves (with a title). The first tab is like an inbox, there's plenty of actions/link items to choose from for the users, and each of these clicks should be able to instantiate a new component, on click. The actions / links comes in from JSON. The instantiated component will then register itself as a new tab. I'm not sure if this is the 'best' approach? So far, the only guides I've seen are for static tabs, which

问题 So, here's a sample code: <div ng-controller="MyControllerOne"> <span ng-click="foobar()">Click Me!</span> </div> Can I, from that template, without changing controller, call the function foobar() in MyControllerTwo : .controller('MyControllerOne', function($scope) { //some code }) .controller('MyControllerTwo', function($scope) { // method I wanna call function foobar(){ } }) 回答1: While not the prettiest solution, it is technically possible...ish. If you update your HTML to: <div ng

问题 I previously write this [question][1], Inow I have the problem that the model.$viewValue it's not the same of the value the i see in the input box. <div amount-input-currency="" ng-model="data.amount" ></div> This is my directive (isNumeric and similar is not important that works weel): var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.data = { amount: ''}; }); app.directive('amountInputCurrency', function () { return { restrict: 'EA', require:

问题 In my controller HTML I am passing an object into a directive as such: <div cr-count-summary countdata="vm.currentCountData"></div> The vm.currentCountData is an object that is returned from a factory My directive code is below: function countSummary() { var directive = { scope: { countData: '=' }, link: link, templateUrl: function(element, attrs) { if (attrs.countdata.type === 'Deposit') { return 'app/count/countsummary/countDeposit.html'; } else { return 'app/count/countsummary