角網格標題中的動態圖像

Question

我正在試圖在標題中創建具有動態圖像的角網格。我使用headerCellTemplate在網格中創建圖像。 如果我硬編碼它的作品的圖像的網址。如果我嘗試使用網址{{url}}和$ scope.url =「http \ something」，它似乎無法解析網址。 解決此問題的任何幫助將不勝感激。 我這裏有一個例子： http://plnkr.co/edit/DO8vxnq8H7IDBF9u16F3?p=preview

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']); 

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { 
var myHeader = "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span>" 
+ "<img ng-src={{url}} alt=\"Mountain View\" style=\"width:100px;height:30px;\"></span> <span ui-grid-visible=\"col.sort.direction\" ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\">&nbsp;</span></div><div class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\"><i class=\"ui-grid-icon-angle-down\">&nbsp;</i></div><div ui-grid-filter></div></div>"; 

var myHeader2 = "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span>" 
+ "<img ng-src=\"https://angularjs.org/img/AngularJS-large.png\" alt=\"Mountain View\" style=\"width:100px;height:30px;\"></span> <span ui-grid-visible=\"col.sort.direction\" ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\">&nbsp;</span></div><div class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\"><i class=\"ui-grid-icon-angle-down\">&nbsp;</i></div><div ui-grid-filter></div></div>"; 

    $scope.gridOptions = { 
    enableSorting: true, 
    rowHeight:100, 
    columnDefs: [ 
     { field: 'name' }, 
     { field: 'pet',headerCellTemplate: myHeader2 }, 
     { field: 'color', headerCellTemplate: myHeader} 
    ], 
    data:[ 
     {name:"Thor",pet:"dog",color:"brown"}, 
     {name:"Athena",pet:"dog 2",color:"white"}, 
     {name:"Sandy",pet:"dog 3",color:"brown"} 
     ] 
    }; 
    $scope.url = "https://angularjs.org/img/AngularJS-large.png"; 
}]); 

感謝

Answer 1

請使用這樣

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']); 
 

 
app.controller('MainCtrl', ['$scope', '$http', 
 
    function($scope, $http) { 
 
    $scope.url = "https://angularjs.org/img/AngularJS-large.png"; 
 
    var myHeader = "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span>" + "<img ng-src='" + $scope.url + "' alt=\"Mountain View\" style=\"width:100px;height:30px;\"></span> <span ui-grid-visible=\"col.sort.direction\" ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\">&nbsp;</span></div><div class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\"><i class=\"ui-grid-icon-angle-down\">&nbsp;</i></div><div ui-grid-filter></div></div>"; 
 

 
    var myHeader2 = "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span>" + "<img ng-src=\"https://angularjs.org/img/AngularJS-large.png\" alt=\"Mountain View\" style=\"width:100px;height:30px;\"></span> <span ui-grid-visible=\"col.sort.direction\" ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\">&nbsp;</span></div><div class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\"><i class=\"ui-grid-icon-angle-down\">&nbsp;</i></div><div ui-grid-filter></div></div>"; 
 

 
    $scope.gridOptions = { 
 
     enableSorting: true, 
 
     rowHeight: 100, 
 
     columnDefs: [{ 
 
     field: 'name' 
 
     }, { 
 
     field: 'pet', 
 
     headerCellTemplate: myHeader 
 
     }, { 
 
     field: 'color', 
 
     headerCellTemplate: myHeader 
 
     }], 
 
     data: [{ 
 
     name: "Thor", 
 
     pet: "dog", 
 
     color: "brown" 
 
     }, { 
 
     name: "Athena", 
 
     pet: "dog 2", 
 
     color: "white" 
 
     }, { 
 
     name: "Sandy", 
 
     pet: "dog 3", 
 
     color: "brown" 
 
     }] 
 
    }; 
 
    $scope.url = "https://angularjs.org/img/AngularJS-large.png"; 
 
    } 
 
]);

Answer 2

嘗試這樣;在你的HTML

<img ng-src="https://{{url}}"/> 

在控制器，

$scope.url = 'angularjs.org/img/AngularJS-large.png'; 

看一看這個JSFiddle