angularjs tutorial pdf




"एनजी- src" में एक फ़ंक्शन को कैसे कॉल करें (2)

क्या कस्टम निर्देश के तर्क के रूप में myFunction को पारित करना बेहतर नहीं होगा? इस तरह, हम दोनों को अलग कर देते हैं, और आसानी से बदल सकते हैं कि भविष्य में कौन सा कार्य करना है।

एचटीएमएल

<body ng-app='testApp'>
    <div ng-controller='TestCtrl'>
        <img my-src callback='myFunction()' />
    </div>
</body>

जे एस:

angular.module('testApp', [])
.controller('TestCtrl', function($scope) {
    $scope.myFunction = function() {
        return 'http://nodejs.org/images/roadshow-promo.png';
    }
})
.directive('mySrc', function() {
    return {
        restrict: 'A',
        scope: {
            callback: '&'
        },
        link: function ( scope, elem, attrs ) {
            elem.attr('src', scope.callback());
        }
    };
})

http://jsfiddle.net/GLS2a/

कोड को गतिशील रूप से एक छवि के स्रोत को पुनः प्राप्त करने के लिए मुझे एक फ़ंक्शन को कॉल करने में सक्षम होने की आवश्यकता है। निम्नलिखित कोड स्निपेट मुझे क्या चाहिए का एक उदाहरण दिखाता है:

<!-- "myFunction" exists in the current scope -->
<img ng-src="myFunction()" />

मुझे यकीन है कि यह सरल होना है, लेकिन मैं अभी एनजी- src प्रलेखन में कुछ भी नहीं पा सकता हूं! किसी और ने कभी यह मारा?

अग्रिम में धन्यवाद!

निर्देश (उदाहरण उत्तर पर आधारित)

दूसरों ने एक निर्देश की सिफारिश की। मैं क्लाइंट कोड पोस्ट नहीं कर सकता, इसलिए मैंने एक छोटा सा उदाहरण लिखा था जो प्लंकर ( यहां देखें ) में कैसा दिख सकता है। मूल निर्देश ही है:

app.directive("imageSource", function (){
  return { link: function (scope, element, attrs){
      element.attr("src", scope.imageUrlArray[attrs.imageSource]);
    }
  };
});

मुझे पता है कि एक उदाहरण के रूप में मेरे पास यहां क्या है जो शायद एनजी-एसआरके में चर का उपयोग करके एनजी-रिपीट के साथ किया जा सकता है, लेकिन यह एक उदाहरण के रूप में कार्य करता है कि यदि कोई आवश्यक हो तो एक निर्देश कैसा दिखेगा।


ठीक है, अंत में वहाँ गया:

जावास्क्रिप्ट:

 angular.module('MyApp', [])
    .controller('Ctrl2', function($scope) {
    })
    .directive('mySrc', function() {
        return {
        restrict: 'A',
        link: function ( scope, elem, attrs ) {
             //replace test with whatever myFunction() does
             elem.attr('src', 'test1');
        }
      };
    });

HTML:

<div ng-app="MyApp">
  <div ng-controller="Ctrl2">
      <img my-src />
  </div>
</div>

Fiddle





angularjs