কৌণিক সংস্থা: ব্যাকগ্রাউন্ড-চিত্রের জন্য এনজি-এসসিআর সমতুল্য: ইউআরএল (…)

Question

Angularjs আপনি আছেন ট্যাগ ng-src যা উদ্দেশ্য আপনি আগে angularjs ভেরিয়েবল মধ্যে স্থাপন মূল্যায়ন পায় একটি অবৈধ URL এর জন্য একটি ত্রুটি পাবেন না হয়েছে {{এবং }}।

সমস্যাটি হ'ল আমি background-imageএকটি ইউআরএল সেট নিয়ে বেশ কিছু ডিআইভি ব্যবহার করি । আমি দুর্দান্ত সিএসএস 3 সম্পত্তি background-sizeযা ডিআইভির সঠিক আকারে চিত্রটি ফসল করে তা করার জন্য আমি এটি করি।

একমাত্র সমস্যা হ'ল তারা এনজি-এসসিআর ট্যাগ তৈরি করার ঠিক একই কারণে আমি প্রচুর ত্রুটি পেয়েছি: ইউআরএলটিতে আমার কিছু ভেরিয়েবল রয়েছে এবং ব্রাউজারটি মনে করে যে চিত্রটি নেই।

আমি বুঝতে পারি যে কোনও ক্রুড লেখার সম্ভাবনা রয়েছে {{"style='background-image:url(myVariableUrl)'"}}তবে এটি 'নোংরা' বলে মনে হচ্ছে।

আমি অনেক অনুসন্ধান করেছি এবং এটি করার সঠিক উপায় খুঁজে পাচ্ছি না। এই অ্যাপ্লিকেশনটি ত্রুটিযুক্ত হয়ে উঠছে all

Answer 1

ngSrcএকটি স্থানীয় নির্দেশিকা, সুতরাং দেখে মনে হচ্ছে আপনি একটি অনুরূপ দিকনির্দেশনা চান যা আপনার ডিভের background-imageশৈলীতে পরিবর্তন করে ।

আপনি নিজের নির্দেশিকা লিখতে পারেন যা আপনি যা চান ঠিক তেমন করে। উদাহরণ স্বরূপ

app.directive('backImg', function(){
    return function(scope, element, attrs){
        var url = attrs.backImg;
        element.css({
            'background-image': 'url(' + url +')',
            'background-size' : 'cover'
        });
    };
});​

যা আপনি এই মত প্রার্থনা করবে

<div back-img="<some-image-url>" ></div>

বোনাস হিসাবে চতুর বিড়ালগুলির সাথে জেএসফিডাল: http://jsfiddle.net/jaimem/aSjwk/1/

Comments

খুব সুন্দর নির্দেশ; একমাত্র সমস্যা হ'ল এটি বিরতি সমর্থন করে না। আমি সম্ভবত এটি এইভাবে সংশোধন করব: jsfiddle.net/BinaryMuse/aSjwk/2

— মিশেল

আপনাকে ধন্যবাদ, এটি কোনও প্রকার বিহীন ছাড়া ব্যাপার নয়, এর বিড়ালছানা রয়েছে!

— ভিজিয়ান স্কেলোরু

এটির সাথে কোনও সুরক্ষা সমস্যা যদি আপনি অবিশ্বস্ত উত্স থেকে লোড করছেন?

— আকিল ফার্নান্দেস

এই কাজ, কিন্তু শুধুমাত্র যদি আপনার ছবির URL ইতিমধ্যে সংজ্ঞায়িত করা হয়, ব্যবহার @mythz উত্তর stackoverflow.com/a/15537359/1479680 একটি উন্নততর obeservable URL এর

— Magico

Answer 2

এই আমার জন্য কাজ করে

<li ng-style="{'background-image':'url(/static/'+imgURL+')'}">...</li>

Comments

আমি মনে করি এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। কাস্টম নির্দেশিকা যুক্ত করার দরকার নেই।

— জাকোব লাক্কে ম্যাডসেন

আমি

— সেইটির

এটি গতিময়, এই অর্থে যে কোনও নির্দেশিকা সবথেকে ফিট করে, যেখানেই আপনার গতিশীল পটভূমি প্রয়োজন। প্রশ্নটি উল্লেখ করেছে এটি কম পুনরায় ব্যবহারযোগ্য বলে মনে হয়েছে।

— খ্রিস্টান বোনাটো

কৌণিক 1.5.8 তে কাজ করে না, এটি এখনও imgURLসেট না করে চিত্রটি লোড করার চেষ্টা করে এবং সেট হয়ে গেলে আবার চেষ্টা করে imgURL।

— লেরোয়দেব

এটি ভুল, আপনার ইউআরএলে @% এর মতো কোনও বিশেষ ভেরিয়েবল থাকলে তা ভেঙে যাবে।

— efwjames

Answer 3

উপরের উত্তরটি পর্যবেক্ষণযোগ্য বিরক্তি সমর্থন করে না (এবং ডিবাগ করার চেষ্টা করার জন্য আমাকে অনেক সময় ব্যয় করতে পারে)। JsFiddle লিংক @BrandonTilley মন্তব্যে উত্তর যে আমার জন্য কাজ, যা আমি সংরক্ষণের জন্য পুনরায় পোস্ট করব এখানে ছিল:

app.directive('backImg', function(){
    return function(scope, element, attrs){
        attrs.$observe('backImg', function(value) {
            element.css({
                'background-image': 'url(' + value +')',
                'background-size' : 'cover'
            });
        });
    };
});

---

নিয়ামক এবং টেম্পলেট ব্যবহার করে উদাহরণ

নিয়ামক:

$scope.someID = ...;
/* 
The advantage of using directive will also work inside an ng-repeat :
someID can be inside an array of ID's 
*/

$scope.arrayOfIDs = [0,1,2,3];

টেমপ্লেট :

টেমপ্লেটে যেমন ব্যবহার করুন:

<div back-img="img/service-sliders/{{someID}}/1.jpg"></div>

বা পছন্দ মত:

<div ng-repeat="someID in arrayOfIDs" back-img="img/service-sliders/{{someID}}/1.jpg"></div>

Answer 4

এটি দিয়ে এরকম কিছু করাও সম্ভব ng-style:

ng-style="image_path != '' && {'background-image':'url('+image_path+')'}"

যা কোনও অ-বিদ্যমান চিত্র আনার চেষ্টা করবে না।

Comments

আপনি যদি কৌনিক (1.1.5 এবং তার বেশি) এর একটি নতুন সংস্করণ ব্যবহার করেন তবে @ এসক্রেইন এটিও দেখুন: stackoverflow.com/a/12151492/1218080 । ভিউগুলিতে প্রকৃত টেরিনারি অপারেটরের জন্য সমর্থন যুক্ত করা হয়েছিল।

— হলোগ্রাফিক-নীতি

এর মতো সরল স্ট্রিং কনটেনটেশন আমার জন্য ইন্টারপোলেশনের পরিবর্তে স্কোপ অবজেক্টে কাজ করেছিল।

— শারদুল

Answer 5

হুবিলির জবাবের সাথে সাদৃশ্য, কেবল অন্তরঙ্গকরণের সাথে:

<li ng-style="{'background-image': 'url({{ image.source }})'}">...</li>

Comments

এখানে কাজ করে নি: <span ng-style="{'background-image': 'url(/styles/images/profile.png)'}" style="background-image: url("");"></span>। @ হুবলেই পদ্ধতির কাজ হয়েছে।

— মার্কোস লিমা

একই ফলাফল পাওয়া :(

— কুশল জয়েসওয়াল

Answer 6

কেবল স্বাদের বিষয় তবে আপনি যদি ভেরিয়েবলটি অ্যাক্সেস করতে পছন্দ করেন বা সরাসরি এভাবে ফাংশন করেন:

<div id="playlist-icon" back-img="playlist.icon">

পরিবর্তে এটির মতো বিভক্ত করা:

<div id="playlist-icon" back-img="{{playlist.icon}}">

তারপরে আপনি নির্দেশটিকে কিছুটা আলাদাভাবে সংজ্ঞায়িত করতে পারেন scope.$watchযা $parseবৈশিষ্ট্যের সাথে করবে

angular.module('myApp', [])
.directive('bgImage', function(){

    return function(scope, element, attrs) {
        scope.$watch(attrs.bgImage, function(value) {
            element.css({
                'background-image': 'url(' + value +')',
                'background-size' : 'cover'
            });
        });
    };
})

এখানে এটির আরও পটভূমি রয়েছে: AngularJS: $ পর্যবেক্ষণ এবং $ ঘড়ির পদ্ধতির মধ্যে পার্থক্য

Answer 7

@ জাইম আপনার উত্তর ভাল আছে। তবে আপনার পৃষ্ঠায় যদি $ http.get থাকে তবে আপনি এনজি-ইফ ব্যবহার করতে পারেন

app.directive('backImg', function(){
    return function($scope, $element, $attrs){
        var url = $attrs.backImg;
        $element.css({
            'background-image': 'url(' + url + ')',
            'background-size': 'cover'
        });
    }
});

কারখানায়

app.factory('dataFactory', function($http){
    var factory = {};
    factory.getAboutData = function(){
        return $http.get("api/about-data.json");
    };
    return factory;
});

নিয়ন্ত্রক এলাকায়

app.controller('aboutCtrl', function($scope, $http, dataFactory){
    $scope.aboutData = [];
    dataFactory.getAboutData().then(function(response){
        // get full home data
        $scope.aboutData = response.data;
        // banner data
        $scope.banner = {
            "image": $scope.aboutData.bannerImage,
            "text": $scope.aboutData.bannerText
        };
    });
});

এবং ভিউটি যদি আপনি নীচের মতো এনজি-ব্যবহার করেন তবে আপনি ছবিটি অন্যরকমভাবে ফাঁকে ফাঁকে পেয়ে যাবেন, আপনি চিত্রটি পেতে পারবেন না কারণ এইচটিটিপি অনুরোধের আগে নির্দেশিকাটির মান পাওয়া যায়।

<div class="stat-banner"  ng-if="banner.image" background-image-directive="{{banner.image}}">

Answer 8

আমি 1.5 টি উপাদান পেয়েছি যা আমার অসম্পূর্ণ পরিস্থিতিতে সবচেয়ে ভাল কাজ করার জন্য ডিওএম থেকে স্টাইলিং বিমূর্ত করে।

উদাহরণ:

<div ng-style="{ 'background': $ctrl.backgroundUrl }"></div>

এবং নিয়ামকটিতে, কিছু এটি পছন্দ করে:

this.$onChanges = onChanges;

function onChanges(changes) {
    if (changes.value.currentValue){
        $ctrl.backgroundUrl = setBackgroundUrl(changes.value.currentValue);
    }
}

function setBackgroundUrl(value){
    return 'url(' + value.imgUrl + ')';
}

Answer 9

যেহেতু আপনি উল্লেখ করেছেন ng-srcএবং মনে হয় আপনি নিজের চিত্রটি লোড করার আগে পৃষ্ঠাটি রেন্ডারিং শেষ করতে চান, তাই ব্রাউজারটি রেন্ডারিং শেষ করার পরে আপনি জাইমের উত্তর পরিবর্তন করতে পারেন স্থানীয় নির্দেশিকা চালানোর জন্য ।

এই ব্লগ পোস্টটি এটি বেশ ভাল ব্যাখ্যা করে; মূলত, আপনি সন্নিবেশ $timeoutমোড়কের জন্য window.setTimeoutযেখানে আপনি সিএসএস সেই পরিবর্তন করতে কলব্যাক ফাংশন আগে।