বাহ্যিক js ফাংশন থেকে AngularJS অ্যাক্সেসের সুযোগ


131

আমি একটি বাহ্যিক জাভাস্ক্রিপ্ট ফাংশন (লক্ষ্য নিয়ামকের সম্পূর্ণ অপ্রাসঙ্গিক) মাধ্যমে নিয়ামকের অভ্যন্তরীণ সুযোগটি অ্যাক্সেস করার সহজ উপায় আছে কিনা তা দেখার চেষ্টা করছি

আমি এখানে অন্যান্য কয়েকটি প্রশ্ন দেখেছি

angular.element("#scope").scope();

কোনও ডিওএম উপাদান থেকে সুযোগটি পুনরুদ্ধার করতে পারে, তবে আমার প্রচেষ্টা বর্তমানে কোনও সঠিক ফলাফল দিচ্ছে না।

এখানে jsfiddle: http://jsfiddle.net/sXkjc/5/

আমি বর্তমানে প্লেইন জেএস থেকে কৌণিক স্থানান্তরিত হয়ে যাচ্ছি। আমি এটি অর্জনের প্রধান কারণটি হ'ল আমার আসল গ্রন্থাগার কোডটি যথাসম্ভব অক্ষত রাখা; আমার নিয়ামক প্রতিটি ফাংশন যোগ করার জন্য প্রয়োজন সংরক্ষণ।

আমি কীভাবে এটি অর্জন করতে পারি সে সম্পর্কে কোনও ধারণা? উপরের ফিডল সম্পর্কে মন্তব্যগুলিও স্বাগত।


ডকস অনুযায়ী এফওয়াইআইয়ের সাহায্যে ডিবাগ ডেটা.scope() সক্ষম করা প্রয়োজন তবে গতিজনিত কারণে ডিবাগ ডেটা উত্পাদনে ব্যবহার করার পরামর্শ দেওয়া হয় না । নীচের সমাধানগুলি চারদিকে scope()
ঘোরে

@rtpHarry ঠিক আছে। স্কোপ () এর ব্যবহারের জন্য নীচের উত্তরগুলি হ্রাস করা হয়। আমার উত্তর এখানে দেখুন stackoverflow.com/a/34078750/319302
Cagatay কালান

উত্তর:


223

আপনার একটি স্পেস মান $ প্রয়োগ করতে হবে ( যদি আপনি জিকিউরি / জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলারের মতো কৌণিক নিয়ন্ত্রনের নিয়ন্ত্রণের বাইরে থেকে কোনও স্কোপ ভ্যালুতে কোনও পরিবর্তন করতে চান তবে ) প্রয়োগ করুন ()

function change() {
    alert("a");
    var scope = angular.element($("#outer")).scope();
    scope.$apply(function(){
        scope.msg = 'Superhero';
    })
}

ডেমো: ফিডল


2
@ dk123 angular.element("#scope")কাজ করছে না, যদিও কাজ করছে, আপনারও angular.element($("#scope"))jquery থাকা দরকার
অরুণ পি জনি

1
আমি জানি এটি কিছুক্ষণ হয়ে গেছে, তবে আমি আশা করি কেউ কেউ আমাকে এর জবাব দিতে পারে ... কেন ভ্যার স্কোপটি = কৌনিক.এলিমেন্ট ($ ("# বহিরাগত"))। সুযোগ (); পরিবর্তন ফাংশন ভিতরে ঘোষণা করতে হবে? যদি আমি এটি বিশ্বব্যাপী স্থানান্তরিত করি তবে তা কোনও চলবে না?
মার্ক এম।

1
@MarcM। আমি মনে করি এটি অ্যাঙ্গুলারের স্কোপ বিনোদনের সাথে সম্পর্কিত। আপনি পরিবর্তন ফাংশনটি ব্যবহার করার সময়, পূর্বের স্কোপটি বিশ্বব্যাপী বর্ণটি আর উপস্থিত থাকতে পারে না (বিনোদনের কারণে)।
dk123

1
angular.element ($ ( "DIV আছে [NG-নিয়ামক = 'myCtrl']")) সুযোগ ()। ডিভ এলিমেন্টে অতিরিক্ত # বাউন্ডারের চেয়ে ভাল, আমার ধারণা
ওয়াটার্নি

1
স্কোপ () আমরা যখন করি তখন অপরিজ্ঞাত হয়ে যায়: ile compileProvider.debugInfoEn اهل (মিথ্যা); কৌণিক মধ্যে। তাহলে আমরা কীভাবে এটি ডিবাগইনফোএনবেলড মিথ্যা দিয়ে কাজ করতে পারি?
অ্যাগনোসকো

26

আমি এই প্রশ্নটি পোস্ট করার পরে বেশ কিছুক্ষণ হয়েছে, তবে এখনও এই মতামতগুলি বিবেচনা করে মনে হচ্ছে, এই গত কয়েক মাসে আমি আরও একটি সমাধান নিয়ে এসেছি:

$scope.safeApply = function( fn ) {
    var phase = this.$root.$$phase;
    if(phase == '$apply' || phase == '$digest') {
        if(fn) {
            fn();
        }
    } else {
        this.$apply(fn);
    }
};

উপরের কোডটি মূলত একটি ফাংশন তৈরি করে safeApplyযা $applyফাংশনটিকে কল করে (অরুণের উত্তর হিসাবে বলা আছে) যদি এবং কেবলমাত্র কৌণিক বর্তমানে পর্যায়ে চলে না $digestযায়। অন্যদিকে, যদি কৌণিক বর্তমানে জিনিসগুলি হজম করে চলেছে তবে এটি ঠিক যেমনটি ফাংশনটি সম্পাদন করবে তেমনি পরিবর্তনগুলি করার জন্য এটি কৌণিককে সিগন্যাল করার পক্ষে যথেষ্ট হবে be

$applyঅ্যাঙ্গুলারজেস বর্তমানে তার $digestপর্যায়ে থাকা অবস্থায় ফাংশনটি ব্যবহার করার চেষ্টা করার সময় অসংখ্য ত্রুটি ঘটে । এই safeApplyজাতীয় ত্রুটিগুলি রোধ করার জন্য উপরের কোডটি একটি নিরাপদ মোড়ক।

(দ্রষ্টব্য: সুবিধার্থে আমি ব্যক্তিগতভাবে safeApplyফাংশন হিসাবে কাজ করতে চাই $rootScope)

উদাহরণ:

function change() {
    alert("a");
    var scope = angular.element($("#outer")).scope();
    scope.safeApply(function(){
        scope.msg = 'Superhero';
    })
}

ডেমো: http://jsfiddle.net/sXkjc/227/


1
আপনার নিরাপদ প্রয়োগের কাজটি কেন কাজ করে? আপনি যা বলছেন তার মতো মনে হচ্ছে "কৌণিকটি $ প্রয়োগ বা gest ডাইজেস্ট পর্যায়ে থাকলে ফাংশনটি নিজেই সম্পাদন করুন, অন্যথায় ফাংশনটি প্রয়োগ করতে $ প্রয়োগ () ব্যবহার করুন" .... তবে আপনি যদি ফাংশনটি নিজেই সম্পাদন করেন .. .. যে কোনও মডেল আপডেট কিভাবে? মনে হচ্ছে এটি অনুকূল আচরণের মতো হবে না, যদি না এমন কিছু ঘটে থাকে যা আমি জানি না। কৌণিকের কোনও প্রক্রিয়া কি কোনও পোল চালায় changes পরিবর্তনের সুযোগ যা এটি সরাসরি ঘটতে পারে ???
trusktr 26'14

এছাড়াও, যদি আপনাকে এই রাজ্যের বিরুদ্ধে রক্ষার প্রয়োজন হয়, তবে আমি বিবেচনা করব যে $ প্রয়োগ () পদ্ধতির একটি বাগটি ঠিক করা দরকার।
trusktr 26'14

@trusktr আমি যা বুঝি সেগুলি থেকে ফাংশনটি সম্পাদন করা সাধারণত কৌণিক দ্বারা ধরা হয় যদি ফাংশনটি কোনও মডেল পরিবর্তন করে এবং তাই কৌণিকগুলি পরবর্তী ডাইজেস্ট পর্যায়ে তাদের আপডেট করে।
dk123

@ ট্রুসকিট্রি আমি একমত হয়েছি যদিও সেফগার্ড ব্যতীত যদি স্বাভাবিক $ প্রয়োগ () প্রয়োগ করা যায় তবে এর চেয়ে ভাল আর কিছু হতে পারে না। সংক্ষেপে, নিরাপদ প্রয়োগের একমাত্র উদ্দেশ্য হ'ল $ প্রয়োগ () ত্রুটিগুলির বিরুদ্ধে রক্ষা করা। নিশ্চিত না যদিও এটি কোনও রিপোর্টিত সমস্যা ছিল এবং এখন তা স্থির হয়েছে, বা এখনও চলছে ongoing
dk123

1
কেবল কারণ আমি এতে হোঁচট খেয়েছি : github.com/angular/angular.js/wiki/When-to-use-$scope.$apply () । _ যদি আপনি (! $ স্কোপ।) ফেজ)। স্কোপ। Doing করতে থাকেন তবে এটি প্রয়োগ করুন () কারণ আপনি কল স্ট্যাকের উচ্চ পর্যায়ে নেই __
স্কিফিল্ড

17

এটি করার আরেকটি উপায় হ'ল:

var extScope;
var app = angular.module('myApp', []);
app.controller('myController',function($scope, $http){
    extScope = $scope;
})
//below you do what you want to do with $scope as extScope
extScope.$apply(function(){
    extScope.test = 'Hello world';
})

1
এই মন্তব্য কেন এটির জন্য সেরা উত্তর নয় তা আমি এখনও বুঝতে পারি না। হতাশা এবং রাগ নিয়ে দু'দিন ধরে ইন্টারনেট খননের পরে, অবশেষে এটিই আমার সমস্যার সমাধান করেছে। আপনাকে ধন্যবাদ চার্লস্টন আপনি মহান, স্যার!
রাজকুমার

13

আমরা এটি লোড পরে কল করতে পারেন

http://jsfiddle.net/gentletech/s3qtv/3/

<div id="wrap" ng-controller="Ctrl">
    {{message}}<br>
    {{info}}
    </div>
    <a  onClick="hi()">click me </a>

    function Ctrl($scope) {
        $scope.message = "hi robi";
        $scope.updateMessage = function(_s){
            $scope.message = _s;    
        };
    }

function hi(){
    var scope = angular.element(document.getElementById("wrap")).scope();
        scope.$apply(function() {
        scope.info = "nami";
        scope.updateMessage("i am new fans like nami");
    });
}

8

আমি এই প্রশ্নটি জিজ্ঞাসা করে অনেক দিন হয়ে গেছে, তবে এখানে এমন একটি উত্তর রয়েছে যার জন্য jquery এর প্রয়োজন নেই:

function change() {
    var scope = angular.element(document.querySelector('#outside')).scope();
    scope.$apply(function(){
        scope.msg = 'Superhero';
    })
}

3

এখানে একটি পুনরায় ব্যবহারযোগ্য সমাধান: http://jsfiddle.net/flobar/r28b0gmq/

function accessScope(node, func) {
    var scope = angular.element(document.querySelector(node)).scope();
    scope.$apply(func);
}

window.onload = function () {

    accessScope('#outer', function (scope) {
        // change any property inside the scope
        scope.name = 'John';
        scope.sname = 'Doe';
        scope.msg = 'Superhero';
    });

};

2

আপনিও চেষ্টা করতে পারেন:

function change() {
    var scope = angular.element( document.getElementById('outer') ).scope();
    scope.$apply(function(){
        scope.msg = 'Superhero';
    })
}

@ dk123 এই ডোজটির জন্যও জিকুয়ের দরকার নেই।
হরিশ শর্মা

1

গৃহীত উত্তরটি দুর্দান্ত। আমি প্রসঙ্গে কৌণিক স্কোপের কী হয় তা দেখতে চেয়েছিলাম ng-repeat। জিনিসটি হচ্ছে, কৌণিক প্রতিটি পুনরাবৃত্তি আইটেমের জন্য একটি উপ-সুযোগ তৈরি করবে। মূলটিতে সংজ্ঞায়িত কোনও পদ্ধতিতে কল করার সময় $scope, এটির আসল মান ধরে রাখা (জাভাস্ক্রিপ্ট বন্ধ হওয়ার কারণে)। তবে, thisকলিং স্কোপ / অবজেক্টকে বোঝায়। এটি ভালভাবে কাজ করে, আপনি কখন $scopeএবং কখন পরিষ্কার হনthis একই এবং কখন তারা ভিন্ন। HTH

এখানে একটি ফ্রিডল যা পার্থক্যটি চিত্রিত করে: https://jsfiddle.net/creitzel/oxsxjcyc/


1

আমি নবাগত, তাই খারাপ অভ্যাস হলে দুঃখিত। নির্বাচিত উত্তরের ভিত্তিতে, আমি এই ফাংশনটি করেছি:

function x_apply(selector, variable, value) {
    var scope = angular.element( $(selector) ).scope();
    scope.$apply(function(){
        scope[variable] = value;
    });
}

আমি এটি এইভাবে ব্যবহার করছি:

x_apply('#fileuploader', 'thereisfiles', true);

যাইহোক, আমার ইংরেজি জন্য দুঃখিত


0
<input type="text" class="form-control timepicker2" ng-model='programRow.StationAuxiliaryTime.ST88' />

সুযোগ মান অ্যাক্সেস

ধরুন যে প্রোগ্রামআর.স্টেশনএক্সিলারিটাইম হ'ল একটি বস্তুর অ্যারে

 $('.timepicker2').on('click', function () 
    {
            var currentElement = $(this);

            var scopeValues = angular.element(currentElement).scope();
            var model = currentElement.attr('ng-model');
            var stationNumber = model.split('.')[2];
            var val = '';
            if (model.indexOf("StationWaterTime") > 0) {
                val = scopeValues.programRow.StationWaterTime[stationNumber];
            }
            else {
                val = scopeValues.programRow.StationAuxiliaryTime[stationNumber];
            }
            currentElement.timepicker('setTime', val);
        });

0

আমাদের ফাংশনে অন্তর্নির্মিত কৌণিক জেস ব্যবহার করতে হবে scope নিয়ামক ফাংশনের বাইরে স্কোপ ভেরিয়েবল বা ফাংশন অ্যাক্সেসের জন্য প্রয়োগ করুন

এটা দুইভাবে সম্পাদন করা যেতে পারে :

| * | পদ্ধতি 1: আইডি ব্যবহার:

<div id="nameNgsDivUid" ng-app="">
    <a onclick="actNgsFnc()"> Activate Angular Scope</a><br><br>
    {{ nameNgsVar }}
</div>

<script type="text/javascript">

    var nameNgsDivVar = document.getElementById('nameNgsDivUid')

    function actNgsFnc()
    {
        var scopeNgsVar = angular.element(nameNgsDivVar).scope();
        scopeNgsVar.$apply(function()
        {
            scopeNgsVar.nameNgsVar = "Tst Txt";
        })
    }

</script>

| * | পদ্ধতি 2: এনজি-কন্ট্রোলারের আরম্ভ ব্যবহার:

<div ng-app="nameNgsApp" ng-controller="nameNgsCtl">
    <a onclick="actNgsFnc()"> Activate Angular Scope</a><br><br>
    {{ nameNgsVar }}
</div>

<script type="text/javascript">

    var scopeNgsVar;
    var nameNgsAppVar=angular.module("nameNgsApp",[])
    nameNgsAppVar.controller("nameNgsCtl",function($scope)
    {
        scopeNgsVar=$scope;
    })

    function actNgsFnc()
    {
        scopeNgsVar.$apply(function()
        {
            scopeNgsVar.nameNgsVar = "Tst Txt";
        })
    }

</script>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.