বাইরের জেএস ফাংশন থেকে AngularJS অ্যাক্সেস সুযোগ




angularjs-scope (8)

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

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

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

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

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

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

আমি কিভাবে এই অর্জন সম্পর্কে যেতে পারে কোন ধারনা? উপরে উল্লাসধ্বনি মন্তব্য এছাড়াও স্বাগত জানাই।


আপনি $scope.$apply() ব্যবহার করতে হবে $scope.$apply() যদি আপনি কোনও jquery / javascript ইভেন্ট হ্যান্ডলারের মতো কোনও কৌণিক নিয়ন্ত্রণের বাইরে থেকে কোন সুযোগ মান পরিবর্তন করতে চান।

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

ডেমো: Fiddle


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

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

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

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");
    });
}

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

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

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

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

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

AngularJs বর্তমানে তার $digest পর্যায়ে আছে যখন $apply ফাংশন ব্যবহার করার চেষ্টা করার সময় অনেক ত্রুটি ঘটে। নিরাপদ safeApply কোড যেমন ত্রুটি প্রতিরোধ একটি নিরাপদ wrapper।

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

উদাহরণ:

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

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


এখানে একটি পুনঃব্যবহারযোগ্য সমাধান: 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';
    });

};

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

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';
})

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

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

অনুমান করুন যে programRow.StationAuxiliaryTime বস্তুর একটি অ্যারে হয়

 $('.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);
        });




angularjs-scope