[英]Image source is not binding with scope variable inside directive
在下面的HTML中,我想從控制器中的scope變量中注入' src '值。
HTML:
<customdir filterby="name" src="imgName"></customdir>
控制器中的$ scope.imgName變量具有圖像路徑。
Javascipt:
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($http, $scope) {
$scope.name = 'ready';
$scope.imgName = '~/Content/arrow-right-xxl.png';
)};
app.directive('customdir', function ($compile) {
var getTemplate = function (filter) {
switch (filter) {
case 'ready': return '<div class="col-lg-1" id="ready">' +
'<img src={{src}} style="height: 35px; width: 35px; margin-left: 0px; margin-top: 35px" />' +
'</div>';
default: return '<input type="text" ng-model="filterby" />';
}
}
return {
restrict: 'E',
scope: {
src: '@',
filterby: "="
},
link: function (scope, element, attrs) {
var el = $compile(getTemplate(scope.filterby))(scope);
element.replaceWith(el);
}
};
});
將您的指令更改為此代碼
app.directive('customdir', function ($compile) {
var getTemplate = function (filter, src) {
switch (filter) {
case 'ready': return '<div class="col-lg-1" id="ready">' +
'<img src='+src+' style="height: 35px; width: 35px; margin-left: 0px; margin-top: 35px" />' +
'</div>';
default: return '<input type="text" ng-model="filterby" />';
}
}
return {
restrict: 'E',
scope: {
src: '=',
filterby: "="
},
link: function (scope, element, attrs) {
var el = $compile(getTemplate(scope.filterby, scope.src))(scope);
element.replaceWith(el);
}
};
});
將scope.filterby和scope.src直接傳遞給您的指令。
傳遞imgName
的值,如下所示,因為您正在使用@
指令的src
屬性。
HTML:
<customdir filterby="name" src="{{imgName}}"></customdir>
在img
標簽中使用ng-src
,如下所示:
使用Javascript:
var getTemplate = function (filter) {
switch (filter) {
case 'ready': return '<div class="col-lg-1" id="ready">' +
'<img ng-src="{{src}}" style="height: 35px; width: 35px; margin-left: 0px; margin-top: 35px" />' +
'</div>';
default: return '<input type="text" ng-model="filterby" />';
}
}
嘗試這個
<customdir filterby="name" ng-src="imgName"></customdir>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.