我想使用 jQuery BeforeAndAfter我的 angularJS 应用程序中的插件。但我有几张不同尺寸的图像。我尝试动态设置宽度和高度,但它不起作用。像这样:
<div id="container">
<img id="imgMY" ng-src="{{photo.source}}" alt="photo" width="{{photo.width}}" height="{{photo.height}}"/>
<img id="imgM2" ng-src="{{photo.source}}" alt="photo" width="{{photo.width}}" height="{{photo.height}}"/>
</div>
...
<script type="text/javascript">
$(function(){
$('#container').beforeAfter({
animateIntro : true,
introDelay : 1000,
introDuration : 500,
showFullLinks : false,
dividerColor : '#1481E3'
});
});
</script>
只有当我对这些属性进行硬编码时它才有效。我怎样才能弄清楚?
最佳答案
使用ng-style
指令。
示例:
<img ... ng-style="{ width : photo.width, height : photo.height }" />
angular.module('test', [])
.controller('TestController', ['$scope', '$document', '$timeout',
function($scope, $document, $timeout) {
$scope.photo = {
link: 'https://pbs.twimg.com/profile_images/2149314222/square.png',
link2 : 'http://cdn-prod.portlandwebworks.com/sites/default/files/angular-3.jpg',
style: {
width: '300px',
height: '200px'
}
};
$timeout(function() {
$('#container').beforeAfter({
animateIntro: true,
introDelay: 1000,
introDuration: 500,
showFullLinks: false,
dividerColor: '#1481E3'
});
});
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="http://www.catchmyfame.com/jquery/beforeafter/js/jquery-ui-1.8.13.custom.min.js"></script>
<script src="http://www.catchmyfame.com/jquery/beforeafter/js/jquery.beforeafter-1.4.min.js"></script>
<div ng-app="test">
<div id="container" ng-controller="TestController">
<img ng-src="{{ photo.link }}" ng-style="photo.style" />
<img ng-src="{{ photo.link2 }}" ng-style="photo.style" />
</div>
</div>
仅供引用(已更新):它无需预加载图像即可工作,但插件可以从这些图像中捕获宽度和高度。
关于jquery - Angular - 动态设置 html img 宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34710610/