javascript - Angularjs: 'সিনট্যাক্স হিসাবে নিয়ামক' এবং $ ঘড়ি




angularjs-scope ng-controller (7)

AngularJs 1.5 কন্ট্রোলারএর গঠন জন্য ডিফল্ট $ ctrl সমর্থন করে।

$scope.$watch("$ctrl.name", (value) => {
    console.log(value)
});

controller as সিনট্যাক্স ব্যবহার করার সময় সম্পত্তি পরিবর্তন সাবস্ক্রাইব কিভাবে?

controller('TestCtrl', function ($scope) {
  this.name = 'Max';
  this.changeName = function () {
    this.name = new Date();
  }
  // not working       
  $scope.$watch("name",function(value){
    console.log(value)
  });
});
<div ng-controller="TestCtrl as test">
  <input type="text" ng-model="test.name" />
  <a ng-click="test.changeName()" href="#">Change Name</a>
</div>  

ES6 সিনট্যাক্সে একটি $ ঘড়ি লেখা আমি যতটা সহজ ছিল না। এখানে আপনি কি করতে পারেন:

// Assuming
// controllerAs: "ctrl"
// or
// ng-controller="MyCtrl as ctrl"
export class MyCtrl {
  constructor ($scope) {
    'ngInject';
    this.foo = 10;
    // Option 1
    $scope.$watch('ctrl.foo', this.watchChanges());
    // Option 2
    $scope.$watch(() => this.foo, this.watchChanges());
  }

  watchChanges() {
    return (newValue, oldValue) => {
      console.log('new', newValue);
    }
  }
}

আপনি $ onChanges কৌণিক উপাদান লাইফ সাইকেল ব্যবহার করতে পারেন।

এখানে ডকুমেন্টেশন দেখুন: docs.angularjs.org/guide/component সামগ্রী ভিত্তিক অ্যাপ্লিকেশন বিভাগের অধীনে


আপনি আসলে একটি ফাংশনটি $ watch () এর প্রথম যুক্তি হিসাবে পাস করতে পারেন:

 app.controller('TestCtrl', function ($scope) {
 this.name = 'Max';

// hmmm, a function
 $scope.$watch(function () {}, function (value){ console.log(value) });
 });

যার মানে আমরা আমাদের এই। নাম উল্লেখ করতে পারেন:

app.controller('TestCtrl', function ($scope) {
    this.name = 'Max';

    // boom
    $scope.$watch(angular.bind(this, function () {
    return this.name; // `this` IS the `this` above!!
    }), function (value) {
      console.log(value);
    });
});

নিয়ামক সম্পর্কে একটি আকর্ষণীয় পোস্ট পড়ুন https://toddmotto.com/digging-into-angulars-controller-as-syntax/


এখানে আপনি $ scope (এবং $ ঘড়ি!) ছাড়াই এটি কীভাবে করবেন শীর্ষ 5 টি ভুল - অপব্যবহার ঘড়ি

আপনি যদি "কন্ট্রোলার হিসাবে" সিনট্যাক্স ব্যবহার করেন, তবে এটি $ স্কোপ ব্যবহার করা এড়িয়ে চলার জন্য আরও ভাল এবং পরিচ্ছন্ন।

এখানে JSFiddle আমার কোড। (আমি নামটি ধরে রাখার জন্য একটি পরিষেবা ব্যবহার করছি, অন্যথায় ES5 Object.defineProperty এর সেট এবং পদ্ধতিগুলি অসীম কলগুলি সৃষ্টি করে।

var app = angular.module('my-module', []);

app.factory('testService', function() {
    var name = 'Max';

    var getName = function() {
        return name;
    }

    var setName = function(val) {
        name = val;
    }

    return {getName:getName, setName:setName};
});

app.controller('TestCtrl', function (testService) {
    var vm = this;

    vm.changeName = function () {
        vm.name = new Date();
    }

    Object.defineProperty(this, "name", {
        enumerable: true,
        configurable: false,
        get: function() {
            return testService.getName();
        },
        set: function (val) {
            testService.setName(val);
            console.log(vm.name);
        }
    }); 
});

তুমি ব্যবহার করতে পার:

   $scope.$watch("test.name",function(value){
        console.log(value)
   });

এটি আপনার উদাহরণ সহ JSFiddle কাজ করছে।


দ্রষ্টব্য : দৃশ্য এবং কন্ট্রোলারটি কোনও রুটে বা নির্দেশের সংজ্ঞা বস্তুর মাধ্যমে সংযুক্ত হলে এটি কাজ করে না। নিচে দেখানো হয় কেবল তখনই কাজ করে যখন HTML এ কিছু SomeCtrl হিসাবে কিছু কন্ট্রোলার থাকে। মার্ক ভি এর মতই নীচের মন্তব্যটি নির্দেশ করে, এবং ঠিক যেমন সে বলে যে এটা ভালো যে বোগদান মত করে তা করে।

আমি ব্যবহার করি: var vm = this; আমার পথ থেকে "এই" শব্দটি পেতে নিয়ামক শুরুতে। তারপর vm.name = 'Max'; এবং ঘড়ির মধ্যে আমি return vm.name । আমি @ বোগদান ব্যবহার করে "ভিএম" ব্যবহার করে "স্ব" ব্যবহার করি। এই var, এটি "vm" বা "self" শব্দটি "এই" শব্দটি ফাংশনের ভেতরে একটি ভিন্ন প্রেক্ষাপটে নিয়ে আসে। (তাই এই নামটি ফেরত দেওয়া হবে। নাম কাজ করবে না) এবং হ্যাঁ, $ ঘড়ি পৌঁছানোর জন্য আপনাকে আপনার সুন্দর "কন্ট্রোলার হিসাবে" সমাধানতে $ স্কোপটি ইনজেক্ট করতে হবে। জন বাবা এর স্টাইল গাইডটি দেখুন: https://github.com/johnpapa/angularjs-styleguide#controllers

function SomeController($scope, $log) {
    var vm = this;
    vm.name = 'Max';

    $scope.$watch('vm.name', function(current, original) {
        $log.info('vm.name was %s', original);
        $log.info('vm.name is now %s', current);
    });
}




ng-controller