AngularJS 지시문에 인수를 전달하면 작동하지 않습니다.

첫 번째 AngularJS 지시문을 코딩하려고합니다. 이 지시문은 그림과 매개 변수 (축소판 그림)를 포함하도록 DIV 요소를 확장해야합니다. thumbnail == true이면 이미지 크기를 조정해야합니다. 나는 그림을 보여줄 수 있었지만 크기는 조정되지 않았다.AngularJS 지시문에 인수를 전달하면 작동하지 않습니다.

<!DOCTYPE html> 
<html ng-app="ExampleDirective"> 
<head> 
<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
<script> 
angular.module('ExampleDirective', []) 
.controller('MyController', function($scope, $window) { 

}) 
.directive('mypicture', function() { 
return { 
    restrict: 'A', 
    template: '<img src="picture.gif" width="calc()" />', 
    scope: {  
    thumbnail: '=', 
    }, 
    link: function (scope, elem, attrs) { 

    scope.calc = function() { 
     if (scope.thumbnail === 'true') { 
     return 50; 
     } 
    }; 


    } 
} 
}); 

</script> 


</head> 
<body ng-controller="MyController"> 

    <div mypicture thumbnail="true" ></div> 

</body> 
</html>

어떤 문제 해결 방법을 알려주세요.
감사합니다.

출처

2014-02-24 user2824073

대신 ng-style를 사용해보십시오 :

app.directive('mypicture', function() { 
return { 
    restrict: 'A', 
    template: '<img src="http://pagead2.googlesyndication.com/simgad/8173680700251715003" 
      ng-style="calc()" />', 
    scope: {  
    thumbnail: '=', 
    }, 
    link: function (scope, elem, attrs) { 

    scope.calc = function() {  
     if (scope.thumbnail == true) { 
      return {width: 150 + 'px'}; 
     }   
     return {width: 100 + 'px'} 
    }; 
    } 
} 
});

데모 Fiddle

출처

2014-02-24 11:40:30

감사합니다! 그것은 작동합니다! – user2824073

AngularJS 지시문에 인수를 전달하면 작동하지 않습니다.

답변

관련 문제