Question

我正在尝试在标题中创建一个带有动态图像的角度网格。我正在使用headerCellTemplate在网格中创建图像。如果我硬编码它的图像的网址它的工作原理。如果我试着向我们{{url}}和$ scope.url =＆＃34; http \ something＆＃34;对于网址，它似乎没有解析网址。任何帮助解决这个问题将不胜感激。我在这里有一个例子： 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

试试这样;在您的HTML中

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

在控制器中，

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

看一下 JSFiddle

Answer 2

请像这样使用

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";
  }
]);

角网格标题中的动态图像

2 个答案: