আপনি কি তৈরিতে কোনও AngularJS নিয়ন্ত্রণকারীকে পরামিতিগুলি দিতে পারেন?


278

আমার ব্যবহারকারীর নাম, ইমেল ইত্যাদির বৈশিষ্ট্য আপডেট করার জন্য একটি এপিআইয়ের সাথে যোগাযোগের জন্য দায়ী একজন নিয়ামক, প্রতিটি ব্যবহারকারীর একটি রয়েছে 'id'যা প্রোফাইল পৃষ্ঠাটি দেখার পরে সার্ভার থেকে পাস করা হয়।

আমি এই মানটি অ্যাঙ্গুলারজেএস কন্ট্রোলারের কাছে দিতে চাই তাই এটি ব্যবহারকারীর জন্য এপিআই এন্ট্রি পয়েন্ট কী তা জানে। আমি মানটি পাস করার চেষ্টা করেছি ng-controller। উদাহরণ স্বরূপ:

function UserCtrl(id, $scope, $filter) {

$scope.connection = $resource('api.com/user/' + id)

এবং এইচটিএমএল মধ্যে

<body ng-controller="UserCtrl({% id %})">

যেখানে {% id %}সার্ভার থেকে প্রেরিত আইডি মুদ্রণ করুন। তবে আমি ত্রুটি পেয়েছি

কোনও মানটিকে এর সৃষ্টিতে নিয়ামকের মধ্যে পাস করার সঠিক উপায় কী?


6
ইউআরএলটির অংশ হিসাবে যদি আপনার আইডি থাকে তবে আপনি কেবল ইউআরএলটি পড়তে পারতেন
আকনসু

আমার খুব অনুরূপ সমস্যা ছিল এবং আমি আমার উত্তর পোস্ট করার সাথে সাথে এটি সমাধান করেছি। কখনও কখনও গ্রন্থাগারগুলি ব্যবহার করে আমরা জাভাস্ক্রিপ্ট ফাংশন কলের সাধারণ মৌলিক ধারণাটিকে উপেক্ষা করি।
জিগার প্যাটেল 25'13

@ নিকপোনলাইন 21+ এর পরেও আপনি এখনও ভাবেন যে এটি সম্ভব নয়?
om471987

উত্তর:


362

মন্তব্য:

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

আসল উত্তর:

আমি এটি উত্তর দিয়েছি হ্যাঁ আপনি একেবারে এটি ব্যবহার করতে পারেন ng-initএবং একটি সাধারণ আরম্ভের ফাংশন।

এখানে নিমজ্জনকারী এর উদাহরণ

এইচটিএমএল

<!DOCTYPE html>
<html ng-app="angularjs-starter">
  <head lang="en">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="app.js"></script>
  </head>  
  <body ng-controller="MainCtrl" ng-init="init('James Bond','007')">
    <h1>I am  {{name}} {{id}}</h1>
  </body>
</html>

জাভাস্ক্রিপ্ট

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

app.controller('MainCtrl', function($scope) {

  $scope.init = function(name, id)
  {
    //This function is sort of private constructor for controller
    $scope.id = id;
    $scope.name = name; 
    //Based on passed argument you can make a call to resource
    //and initialize more objects
    //$resource.getMeBond(007)
  };


});

5
এর জন্য ধন্যবাদ - আমাকে প্রচুর মাথা থেকেঁচানো থেকে রক্ষা করেছে, এবং এটি আমার পরিস্থিতির জন্য নিখুঁতভাবে কাজ করেছে। আমাকে একটি অবজেক্ট আইডি দিয়ে আমার নিয়ামকটি শুরু করতে হয়েছিল এবং এটি ঠিক ছিল।
মেসোনাইজ

26
দস্তাবেজগুলি থেকে :The only appropriate use of ngInit for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
সের্গেই গলিনি

8
উত্তরটি পরিষ্কার করে দেয় যে ডকস এই পদ্ধতির বিরুদ্ধে সুপারিশ করে, তবে কেউ কি আমাকে ডক করতে পারেন যেখানে ডক্স অফিসিয়াল সমাধান সরবরাহ করে?
মাইকেল পেল

53
আমি মনে করি ডকসগুলি কারণ বিবেচনা না করে কেবল এই পদ্ধতির বিরুদ্ধে সুপারিশ করার ক্ষেত্রে দরিদ্র are আমি মনে করি এটি একটি উজ্জ্বল পদ্ধতির। যদি ফ্রেমওয়ার্ক লেখকরা ফ্রেমওয়ার্কটি তাদের "ভুল" উপায়ে ব্যবহার করতে না চান তবে তাদের "ভুল" উপায়ে ব্যবহার করা সম্ভব করা উচিত নয় ... এবং " সঠিক ভাবে!
শন ডি ওয়েট

2
সতর্কতার শব্দ - যদি আপনি কোনও স্কোপ ভ্যালুতে আবদ্ধ হওয়ার চেষ্টা করে থাকেন বা সত্যিই এমন কিছু করেন যা মানটি নিয়ামক ফাংশনে উপস্থিত হওয়ার প্রত্যাশা করে তবে এটি ইতিমধ্যে নিয়ন্ত্রক ফাংশনটি সঞ্চালনের আগে চালিত ng-initহয় - দেখুন plnkr.co/edit / donCm6FRBSX9oENXh9WJ? p = পূর্বরূপ
ড্রাজাস

143

আমি এটির জন্য খুব দেরি করেছি এবং আমার কোনও ধারণা নেই এটি যদি ভাল ধারণা হয় তবে আপনি $attrsকন্ট্রোলারের সাথে ইনজেকটেবলটি অন্তর্ভুক্ত করতে পারেন যাতে কোনও উপাদান হিসাবে প্রদত্ত "যুক্তি" ব্যবহার করে নিয়ামককে আরম্ভ করা যায়, উদাহরণস্বরূপ

app.controller('modelController', function($scope, $attrs) {
    if (!$attrs.model) throw new Error("No model for modelController");

    // Initialize $scope using the value of the model attribute, e.g.,
    $scope.url = "http://example.com/fetch?model="+$attrs.model;
})

<div ng-controller="modelController" model="foobar">
  <a href="{{url}}">Click here</a>
</div>

আবার, এটি কোনও ভাল ধারণা না হলেও কোনও ধারণা নেই, তবে এটি কাজ করে বলে মনে হচ্ছে এবং এটি অন্য বিকল্প।


3
এই পদ্ধতির ব্যবহার করে আমি কীভাবে কোনও জিনিস পাস করব? var obj = {a: 1, b: 2};
নিল

3
এটি একটি হাইব্রিড অ্যাপ্লিকেশন উত্পাদনের সমস্যার একটি খুব যুক্তিসঙ্গত সমাধান।
সুপারলুমিনিয়ার

2
@ নীল: আপনাকে আপনার জসন বস্তুকে আরও শক্তিশালী করতে হবে এবং তারপরে এটি নিয়ামকের অভ্যন্তরে পার্স করতে হবে। ভাল সমাধান নয়, তবে এটি কার্যকর হতে পারে। মাইকের সমাধানটি স্ট্রিংয়ের মতো পরামিতিগুলির জন্য ঠিক আছে ...
এমসিয়র তোফ '

1
এটি ব্যবহারের চেয়ে প্রকৃতপক্ষে নির্ভরযোগ্য ng-init- যদি আপনি কোনও স্কোপ মানের সাথে আবদ্ধ হওয়ার চেষ্টা করছেন তবে এটি হওয়ার আগেই এটি ইতিমধ্যে নিয়ন্ত্রণকারী ফাংশনটি চালাচ্ছেng-init
plnkr.co/edit/donCm6FRBSX9oENXh9WJ?p=preview

2
দিকনির্দেশনা ইত্যাদির সাথে আমি সমস্ত চক্র পুনর্নবীকরণ পেতে পারি না আপনার যদি এমন কোনও নিয়ামক থাকে যা আপনি কয়েকটি ভিন্ন আরম্ভের পরামিতিগুলির সাথে একাধিক ভিউতে ব্যবহার করতে চান তবে এটি সবচেয়ে সহজ এবং সবচেয়ে নির্ভরযোগ্য সমাধান।
এরিক এইচ।

39

এটিও কাজ করে।

javascript:

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

app.controller('MainCtrl', function($scope, name, id) {
    $scope.id = id;
    $scope.name = name;
    // and more init
});

এইচটিএমএল:

<!DOCTYPE html>
<html ng-app="angularApp">
  <head lang="en">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="app.js"></script>
    <script>
       app.value("name", "James").value("id", "007");
    </script>
  </head>
  <body ng-controller="MainCtrl">
    <h1>I am  {{name}} {{id}}</h1>
  </body>
</html>

3
এটি একটি ভাল সমাধান যা বিদ্যমান কন্সট্রাক্টর ইঞ্জেকশন প্রক্রিয়াটির সাথে কাজ করে। আপনি প্রকৃতপক্ষে, 'নাম' এবং 'আইডি' নামে দুটি সহজ পরিষেবা তৈরি করছেন। ইনজেক্টর নির্মাণের সময় তাদের সাথে নামের সাথে মিলে যাওয়ার যত্ন নেয়। দেখুন: ডকস.আঙ্গুলারজস.আর
টড

1
খুশী হলাম। নোটগুলি কেবল স্ট্রিংয়ের মতো আদিম ধরণের নয়, অবজেক্টগুলির সাথেও কাজ করে।
jbustamovej

আমি এই সমাধানটি আরও ভাল পছন্দ করি। আমি আমার নকল কোডগুলি প্যারামিটার পাসিংয়ের মাধ্যমে মডুলারি করতে সক্ষম হয়েছি। চিয়ার্স!
এজেন্টপ্যাক্স

এটি সবচেয়ে মূর্তিমানের মতো দেখায়, তবে আমি নিশ্চিত নই যে এটি কৌণিক দল দ্বারা প্রস্তাবিত
VinGarcia

এটি কী গ্লোবাল কী / মান জোড় সেট আপ করে? এগুলি কোনও প্রদত্ত নিয়ামক দৃষ্টান্তগুলিতে ফেলে দেওয়া যেতে পারে যাতে এটি কেবলমাত্র মূল নিয়ন্ত্রণের অধীনে শিশু নিয়ন্ত্রণকারীদের উপর বাছাই করা যায়? যদি না হয় তবে এটি উইন্ডো স্তরে নিয়মিত গ্লোবাল জাভাস্ক্রিপ্ট ভেরিয়েবল সেট করার চেয়ে সত্যিই আলাদা নয় seems
jpierson

16

ভিউটিতে কনফিগারেশন নির্দেশ করা উচিত নয়

কৌণিক ক্ষেত্রে, টেমপ্লেটটি কখনই কনফিগারেশন নির্দেশ করে না, যা যখন তারা কোনও টেমপ্লেট ফাইল থেকে নিয়ন্ত্রকদের কাছে যুক্তি দিতে চায় তখন স্বভাবতই তারা চায়। এটি পিচ্ছিল opeাল হয়ে যায়। যদি কনফিগারেশন সেটিংস টেমপ্লেটগুলিতে হার্ড-কোডড থাকে (যেমন কোনও নির্দেশক বা নিয়ামক যুক্তির গুণাবলী দ্বারা), আপনি সেই টেমপ্লেটটি আর কোনও একক ব্যবহার ছাড়া আর ব্যবহার করতে পারবেন না। শীঘ্রই আপনি সেই টেমপ্লেটটি পুনরায় ব্যবহার করতে চাইবেন, তবে বিভিন্ন কনফিগারেশনের সাথে এবং এখন এটি করার জন্য আপনি টেমপ্লেটগুলি কৌণিকের কাছে পাস হওয়ার আগে বা ভেরিয়েবলকে বের করে দেওয়ার আগে বিশাল নির্দেশাবলী ব্যবহার করার আগে প্রাক-প্রক্রিয়াজাতকরণ করবেন এইচটিএমএল এর ব্লকগুলি যাতে আপনি মোড়ক ডিভ এবং এর তর্কগুলি বাদ দিয়ে সমস্ত নিয়ামক এইচটিএমএলকে পুনরায় ব্যবহার করেন। ছোট প্রকল্পগুলির জন্য এটি কোনও বড় বিষয় নয়। বড় কোনও কিছুর জন্য (কী কৌণিক এটিকে ছাড়িয়ে যায়) তা কুরুচিপূর্ণ হয়ে ওঠে।

বিকল্প: মডিউল

এই ধরণের কনফিগারেশন হ'ল মডিউলগুলি হ্যান্ডেল করার জন্য ডিজাইন করা হয়েছিল। অনেক কৌণিক টিউটোরিয়ালে লোকেরা তাদের সম্পূর্ণ অ্যাপ্লিকেশনটির জন্য একটি একক মডিউল রাখে, তবে প্রকৃতপক্ষে সিস্টেমটি অনেকগুলি ছোট ছোট মডিউলগুলিকে সম্পূর্ণ অ্যাপ্লিকেশনের ছোট ছোট টুকরো लपेटায় এবং পুরোপুরি সমর্থন করে। আদর্শভাবে, কন্ট্রোলার, মডিউলগুলি পৃথক ফাইলে ঘোষণা করা হবে এবং নির্দিষ্ট পুনরায় ব্যবহারযোগ্য অংশগুলিতে একসাথে সেলাই করা হবে। আপনার অ্যাপ্লিকেশনটি যখন এইভাবে ডিজাইন করা হয়, আপনি সহজ নিয়ামক যুক্তি ছাড়াও প্রচুর পুনরায় ব্যবহার করতে পারেন।

নীচের উদাহরণটিতে 2 টি মডিউল রয়েছে, একই নিয়ামকটিকে পুনরায় ব্যবহার করা হলেও তাদের নিজস্ব কনফিগারেশন সেটিংস রয়েছে। কনফিগারেশন সেটিংস ব্যবহার করে নির্ভরতা ইনজেকশন ব্যবহার করে module.value। এটি কৌণিক উপায়ে অনুসরণ করে কারণ আমাদের নিম্নলিখিত: নির্মাণকারী নির্ভরতা ইনজেকশন, পুনরায় ব্যবহারযোগ্য নিয়ামক কোড, পুনরায় ব্যবহারযোগ্য নিয়ামক টেম্পলেট (কন্ট্রোলার ডিভ সহজেই এনজি-অন্তর্ভুক্ত করা যেতে পারে), সহজেই এইচটিএমএল ছাড়াই ইউনিট-টেস্টেবল সিস্টেম, এবং শেষ পর্যন্ত পুনরায় ব্যবহারযোগ্য একসাথে টুকরা সেলাই জন্য বাহন হিসাবে মডিউল।

এখানে একটি উদাহরণ:

<!-- index.html -->
<div id="module1">
    <div ng-controller="MyCtrl">
        <div>{{foo}}</div>
    </div>
</div>
<div id="module2">
    <div ng-controller="MyCtrl">
        <div>{{foo}}</div>
    </div>
</div>
<script>
    // part of this template, or a JS file designed to be used with this template
    angular.element(document).ready(function() {
        angular.bootstrap(document.getElementById("module1"), ["module1"]);
        angular.bootstrap(document.getElementById("module2"), ["module2"]);
    });
</script>

<!-- scripts which will likely in be in their seperate files -->
<script>
    // MyCtrl.js
    var MyCtrl = function($scope, foo) {
    $scope.foo = foo;
    }

    MyCtrl.$inject = ["$scope", "foo"];

    // Module1.js
    var module1 = angular.module('module1', []);
    module1.value("foo", "fooValue1");
    module1.controller("MyCtrl", MyCtrl);

    // Module2.js file
    var module2 = angular.module('module2', []);
    module2.value("foo", "fooValue2");
    module2.controller("MyCtrl", MyCtrl);
</script>

এটি কর্মে দেখুন: jsFiddle


আমি ইতিমধ্যে upvated, কিন্তু আমি আপনার অবদান জন্য আমার ধন্যবাদ ভয়েস করতে চান। এই উত্তরটি আমাকে আরও ভাল পথে পরিচালিত করেছে। স্ট্যাকওভারফ্লো তখন সেরা যখন লোকেরা সেরা অনুশীলনগুলি ভাগ করে নেয় এবং কেবল হ্যাকি স্নিপেটগুলি না। এটি উজ্জ্বল: "টেমপ্লেটটি কখনই কনফিগারেশন নির্দেশ করে না, যা কোনও টেমপ্লেট ফাইল থেকে নিয়ন্ত্রণকারীদের কাছে যুক্তি দিতে চাইলে তারা যা ইচ্ছা অন্তর্নিহিত হয়"। বিষয়টির হৃদয়ে লেজার ভিশন থাকার জন্য আপনাকে ধন্যবাদ।
পেস্টোফাগাস

15

ভালো লেগেছে @akonsu এবং নিগেল Findlater সুপারিশ করে আপনার url যেখানে URL টি পড়তে পারেন index.html#/user/:idসঙ্গে $routeParams.idএবং এটি নিয়ামক ভিতরে ব্যবহার করুন।

আপনার অ্যাপ্লিকেশন:

var app = angular.module('myApp', [ 'ngResource' ]);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/:type/:id', {templateUrl: 'myView.html', controller: 'myCtrl'});
}]);

সংস্থান পরিষেবা

app.factory('MyElements', ['$resource', function($resource) {
     return $resource('url/to/json/:type/:id', { type:'@type', id:'@id' });
}]);

নিয়ামক

app.controller('MyCtrl', ['$scope', '$routeParams', 'MyElements', function($scope, $routeParams, MyElements) {
    MyElements.get({'type': $routeParams.type, "id": $routeParams.id }, function(elm) {
        $scope.elm = elm;
    })
}]);

তারপরে, এর elmউপর নির্ভর করে ভিউতে অ্যাক্সেসযোগ্য id


8

যদি ng-initবস্তুগুলিতে প্রবেশের জন্য না হয় তবে $scopeআপনি সর্বদা নিজের নির্দেশিকা লিখতে পারেন। তাই আমি যা পেয়েছি তা এখানে:

http://jsfiddle.net/goliney/89bLj/

Javasript:

var app = angular.module('myApp', []);
app.directive('initData', function($parse) {
    return function(scope, element, attrs) {
        //modify scope
        var model = $parse(attrs.initData);
        model(scope);
    };
});

function Ctrl1($scope) {
    //should be defined
    $scope.inputdata = {foo:"east", bar:"west"};
}

এইচটিএমএল:

<div ng-controller="Ctrl1">
    <div init-data="inputdata.foo=123; inputdata.bar=321"></div>
</div>

তবে আমার পদ্ধতিটি কেবলমাত্র অবজেক্টগুলিকে সংশোধন করতে পারে, যা ইতিমধ্যে নিয়ামকের সংজ্ঞায়িত।


রেফারেন্সের জন্য এটি দুর্দান্ত কাজ করে তবে কৌনিকের বর্তমান সংস্করণে এটি $ অ্যাটর্স (বনাম অ্যাট্রেস)
ডানিস ক্রুজ

8

দেখে মনে হচ্ছে আপনার পক্ষে সেরা সমাধানটি আসলে একটি নির্দেশিকা। এটি আপনাকে এখনও আপনার নিয়ামক রাখতে দেয় তবে এর জন্য কাস্টম বৈশিষ্ট্যগুলি সংজ্ঞায়িত করে।

মোড়ানোর সুযোগে আপনার যদি ভেরিয়েবলগুলি অ্যাক্সেসের প্রয়োজন হয় তবে এটি ব্যবহার করুন:

angular.module('myModule').directive('user', function ($filter) {
  return {
    link: function (scope, element, attrs) {
      $scope.connection = $resource('api.com/user/' + attrs.userId);
    }
  };
});

<user user-id="{% id %}"></user>

মোড়ানোর সুযোগে আপনার যদি ভেরিয়েবলের অ্যাক্সেসের প্রয়োজন না হয় তবে এটি ব্যবহার করুন:

angular.module('myModule').directive('user', function ($filter) {
  return {
    scope: {
      userId: '@'
    },
    link: function (scope, element, attrs) {
      $scope.connection = $resource('api.com/user/' + scope.userId);
    }
  };
});

<user user-id="{% id %}"></user>

7

আমি $ রুটপ্রোভাডার ইউজারফুল থেকে ভেরিয়েবলগুলি পাস করতে পেরেছি।

উদাহরণস্বরূপ, আপনি একাধিক স্ক্রিনের জন্য একটি নিয়ামক MyController ব্যবহার করেন, কিছু খুব গুরুত্বপূর্ণ ভেরিয়েবল "মাইসুপারকন্ট্যান্ট্যান্ট" ভিতরে passing

যে সাধারণ কাঠামো ব্যবহার করুন:

Router:

$routeProvider
            .when('/this-page', {
                templateUrl: 'common.html',
                controller: MyController,
                mySuperConstant: "123"
            })
            .when('/that-page', {
                templateUrl: 'common.html',
                controller: MyController,
                mySuperConstant: "456"
            })
            .when('/another-page', {
                templateUrl: 'common.html',
                controller: MyController,
                mySuperConstant: "789"
            })

MyController:

    MyController: function ($scope, $route) {
        var mySuperConstant: $route.current.mySuperConstant;
        alert(mySuperConstant);

    }

6

উদাহরণস্বরূপ রুটগুলি সেট আপ করার সময় আপনি এটি করতে পারেন

 .when('/newitem/:itemType', {
            templateUrl: 'scripts/components/items/newEditItem.html',
            controller: 'NewEditItemController as vm',
            resolve: {
              isEditMode: function () {
                return true;
              }
            },
        })

এবং পরে হিসাবে এটি ব্যবহার করুন

(function () {
  'use strict';

  angular
    .module('myApp')
    .controller('NewEditItemController', NewEditItemController);

  NewEditItemController.$inject = ['$http','isEditMode',$routeParams,];

  function NewEditItemController($http, isEditMode, $routeParams) {
    /* jshint validthis:true */

    var vm = this;
    vm.isEditMode = isEditMode;
    vm.itemType = $routeParams.itemType;
  }
})();

সুতরাং এখানে যখন আমরা আমরা প্রেরিত রুটটি সেট আপ করি: আইটেম টাইপ এবং পরে $ রুটপ্যারামগুলি থেকে এটি পুনরুদ্ধার করুন।


4

আপনার নিয়ামকটিতে $ রুটপ্যারামগুলি ইনজেকশন দিয়ে একটি নিয়ামকের কাছে পরামিতিগুলি পাশ করার অন্য উপায় আছে এবং তারপরে এখানে বর্ণিত url পরামিতিগুলি ব্যবহার করে AngularJS এ কোয়েরি পরামিতিগুলি পড়ার সর্বাধিক সংক্ষিপ্ত উপায় কী?


3

এই প্রশ্নটি পুরানো তবে আমি দীর্ঘদিন ধরে এই সমস্যাটির উত্তর পাওয়ার চেষ্টা করেছি যা আমার প্রয়োজনের জন্য কাজ করবে এবং সহজে এটি খুঁজে পেল না। আমি বিশ্বাস করি যে আমার নিম্নলিখিত সমাধানটি বর্তমানে গৃহীত একের চেয়ে অনেক ভাল, সম্ভবত কারণ এই প্রশ্নটি মূলত উত্থাপিত হওয়ার পরে কৌণিক কার্যকারিতা যুক্ত করেছে।

সংক্ষিপ্ত উত্তর, মডিউল.ভ্যালু পদ্ধতিটি ব্যবহার করে আপনি একটি নিয়ামক কনস্ট্রাক্টরে ডেটা পাস করতে পারবেন।

এখানে আমার উত্সাহ দেখুন

আমি একটি মডেল অবজেক্ট তৈরি করি, তারপরে এটিকে মডিউলটির নিয়ামকের সাথে যুক্ত করে, এটি 'মডেল' নামের সাথে উল্লেখ করে

এইচটিএমএল / জেএস

  <html>
  <head>
    <script>
      var model = {"id": 1, "name":"foo"};

      $(document).ready(function(){
        var module = angular.module('myApp', []);
        module.value('model', model);
        module.controller('MyController', ['model', MyController]);
        angular.bootstrap(document, ['myApp']);
      });

      function confirmModelEdited() {
        alert("model name: " + model.name + "\nmodel id: " + model.id);
      }
    </script>

  </head>
  <body >
      <div ng-controller="MyController as controller">
        id: {{controller.model.id}} <br>
        name: <input ng-model="controller.model.name"/>{{controller.model.name}}
        <br><button ng-click="controller.incrementId()">increment ID</button>
        <br><button onclick="confirmModelEdited()">confirm model was edited</button>
    </div>
  </body>

</html>

আমার কন্ট্রোলারে কনস্ট্রাক্টর তারপরে সেই একই সনাক্তকারী 'মডেল' দিয়ে একটি প্যারামিটার গ্রহণ করে যা এর পরে এটি অ্যাক্সেস করতে পারে।

নিয়ামক

function MyController (model) {
  this.model = model;
}

MyController.prototype.incrementId = function() {
  this.model.id = this.model.id + 1;
}

মন্তব্য:

আমি বুটস্ট্র্যাপিংয়ের ম্যানুয়াল ইনিশিয়ালাইজেশন ব্যবহার করছি , যা আমার মডেলটি কৌণিক পাঠানোর আগে আমাকে আরম্ভ করার অনুমতি দেয় ize এটি বিদ্যমান কোডের সাথে আরও দুর্দান্তভাবে খেলবে কারণ আপনি আপনার প্রাসঙ্গিক ডেটা সেট আপ করার জন্য অপেক্ষা করতে পারেন এবং যখন আপনি চান তখন কেবলমাত্র আপনার অ্যাপ্লিকেশনটির কৌনিক সাবসেটটি সংকলন করতে পারেন।

প্লাঙ্কারটিতে আমি মডেল অবজেক্টের মানগুলিকে সতর্ক করতে একটি বোতাম যুক্ত করেছি যা প্রাথমিকভাবে জাভাস্ক্রিপ্টে সংজ্ঞায়িত হয়েছিল এবং কৌণিকের কাছে গিয়েছিল, কেবল এটি নিশ্চিত করতে যে কৌণিকটি সত্যই মডেল অবজেক্টটি রেফারেন্স করছে, বরং এটি অনুলিপি করা এবং অনুলিপি সহ কাজ করা।

এই লাইনে:

module.controller('MyController', ['model', MyController]);

আমি মাইকন্ট্রোলার বস্তুকে মডিউল.কন্ট্রোলার ফাংশনে পাস করছি, ফাংশন ইনলাইন হিসাবে ঘোষণার চেয়ে। আমি মনে করি এটি আমাদের কন্ট্রোলার অবজেক্টকে আরও স্পষ্টভাবে সংজ্ঞায়িত করতে দেয় তবে কৌণিক ডকুমেন্টেশন এটিকে ইনলাইন করতে থাকে তাই আমি ভেবেছিলাম এটির স্পষ্টতা রয়েছে।

আমি "নিয়ামক হিসাবে" সিনট্যাক্স ব্যবহার করছি এবং "$ স্কোপ" ভেরিয়েবল ব্যবহার না করে মাইকন্ট্রোলারের "এই" বৈশিষ্ট্যে মান নির্ধারণ করছি। আমি বিশ্বাস করি এটি ঠিক যেমন-স্কোপ ব্যবহার করে ঠিকঠাক কাজ করবে, নিয়ামক কার্যভারটি এর পরে এর মতো কিছু দেখাবে:

module.controller('MyController', ['$scope', 'model', MyController]);

এবং নিয়ামক নির্মাণকারী এর মত স্বাক্ষর থাকতে পারে:

function MyController ($scope, model) {

আপনি যে কারণেই চেয়েছিলেন, যদি আপনি এই মডেলটিকে দ্বিতীয় মডিউলটির মান হিসাবে সংযুক্ত করতে পারেন, তবে এটি আপনার প্রাথমিক মডিউলের উপর নির্ভরতা হিসাবে সংযুক্ত করে।

আমি বিশ্বাস করি যে তার সমাধান বর্তমানে গৃহীত একের চেয়ে অনেক ভাল কারণ কারণ

  1. নিয়ামকের কাছে দেওয়া মডেলটি আসলে একটি জাভাস্ক্রিপ্ট অবজেক্ট, মূল্যায়ন করার মতো স্ট্রিং নয়। এটি বস্তুর সত্যিকারের রেফারেন্স এবং এতে পরিবর্তনগুলি এই মডেল অবজেক্টের অন্যান্য রেফারেন্সগুলিকে প্রভাবিত করে।
  2. কৌণিক বলেছে যে এনজি-থ্রি-র গ্রহণযোগ্য উত্তরের ব্যবহার একটি অপব্যবহার, যা এই সমাধানটি করে না।

অ্যাংুলার যেভাবে দেখা গেছে অন্যান্য বেশিরভাগ উদাহরণগুলিতে কাজ করার জন্য দেখে মনে হচ্ছে নিয়ামকটি মডেলটির ডেটা সংজ্ঞায়িত করে যা আমার কাছে কখনই বোধগম্য হয়নি, মডেল এবং নিয়ামকের মধ্যে কোনও বিচ্ছেদ নেই, যা সত্যই মনে হয় না like আমার কাছে এমভিসি। এই সমাধানটি আপনাকে সত্যিকার অর্থে একটি সম্পূর্ণ পৃথক মডেল অবজেক্ট রাখতে দেয় যা আপনি নিয়ামকের কাছে যান। এছাড়াও লক্ষণীয়, আপনি যদি এনজি-অন্তর্ভুক্ত নির্দেশিকা ব্যবহার করেন তবে আপনি আপনার সমস্ত কৌণিক এইচটিএমএল একটি পৃথক ফাইলে রাখতে পারবেন, আপনার মডেল ভিউ এবং নিয়ামককে পৃথক মডুলার টুকরোতে সম্পূর্ণ পৃথক করে।


2

যদি কৌণিক-ইউআই-রাউটার ব্যবহার করে থাকেন তবে এটি সঠিক সমাধান: https://github.com/angular-ui/ui-router/wiki#resolve

মূলত, আপনি নিয়ন্ত্রকটি তাত্ক্ষণিকভাবে চালিত হওয়ার আগে "সমাধান" করার জন্য নির্ভরতার একটি সেট ঘোষণা করেন। আপনি আপনার প্রতিটি "রাষ্ট্র" এর জন্য নির্ভরতা ঘোষণা করতে পারেন। এই নির্ভরতাগুলি তখন নিয়ামকের "কনস্ট্রাক্টর" এ পাস করা হয়।


1

এটি করার একটি উপায় হ'ল পৃথক পরিষেবা থাকবে যা সেই আর্গুমেন্টগুলির জন্য যেখানে তারা জনসাধারণের ডেটা সদস্য for


সেরা উত্তর, আইএমও। আমি বর্তমানে সেই ব্যবহারকারীদের জন্য কিছু ক্ষেত্রে ব্রাউজার স্টোরেজও ব্যবহার করি যারা এফ 5-তে আঘাত হানার সাহস করে, তাই এই রাজ্যটি বজায় রাখা হয়।
ডরমোস

1

আমার নির্দিষ্ট ব্যবহারের ক্ষেত্রে আমি এখানে সমাধানগুলির কোনটিই পছন্দ করি না, তাই আমি বুঝতে পেরেছিলাম যে আমি যা করেছি তা এখানে পোস্ট করেছিলাম কারণ এটি এখানে দেখেনি।

আমি কোনও এনজি-রিপিট লুপের মধ্যে কেবল একটি নিয়ামকের মতো আরও একটি নির্দেশকের মতো ব্যবহার করতে চেয়েছিলাম:

<div ng-repeat="objParameter in [{id:'a'},{id:'b'},{id:'c'}]">
  <div ng-controller="DirectiveLikeController as ctrl"></div>
</div>

এখন, objParameterপ্রতিটি ডাইরেক্টিভ লাইককন্ট্রোলারের (বা যে কোনও সময়ে আপ-টু-ডেট আপ-প্যারামিটার পাওয়ার জন্য) অন অন ক্রিয়েশন অ্যাক্সেস পেতে, আমাকে যা করতে হবে তা হ'ল ইনজেকশন $ সুযোগ এবং কল $scope.$eval('objParameter'):

var app = angular.module('myapp', []);
app.controller('DirectiveLikeController',['$scope'], function($scope) {
   //print 'a' for the 1st instance, 'b' for the 2nd instance, and 'c' for the 3rd.
   console.log($scope.$eval('objParameter').id); 
});

আমি দেখতে পাচ্ছি একমাত্র আসল ক্ষতি এই যে প্যারামিটারটির নাম আছে তা জানতে প্যারেন্ট কন্ট্রোলারের প্রয়োজন objParameter


0

না, এটা সম্ভব নয়. আমি মনে করি আপনি এনজি-থিকে হ্যাক হিসাবে ব্যবহার করতে পারেন http://docs.angularjs.org/api/ng.directive:ngInit


4
আমি পার্থক্য করতে অনুরোধ করছি তবে আপনি এনজি-থিম ব্যবহার করে এবং একটি ইন ফিকশন ব্যবহার করে এটি সম্পাদন করতে পারেন।
জিগার প্যাটেল 25'13

সতর্কতার শব্দ - যদি আপনি কোনও স্কোপ ভ্যালুতে আবদ্ধ হওয়ার চেষ্টা করে থাকেন বা সত্যিই এমন কিছু করেন যা মানটি নিয়ামক ফাংশনে উপস্থিত থাকার প্রত্যাশা করে তবে এটি ng-initঘটে যাওয়ার আগেই এটি ইতিমধ্যে নিয়ামক ফাংশনটি চালায় - দেখুন plnkr.co/edit / donCm6FRBSX9oENXh9WJ? p = পূর্বরূপ
ড্রাজাস

হ্যা এটা সম্ভব. খুব কমপক্ষে, আপনি ডেটা-প্যারাম বা যা কিছু ব্যবহার করবেন। তবে এটি অবশ্যই সম্ভব।
হুয়ান

0

এখানে একটি সমাধান রয়েছে (মার্সিন উইজাইন্স্কির পরামর্শের ভিত্তিতে) যেখানে আপনি আপনার নিয়ামকের মধ্যে কোনও মান পাস করতে চান সেখানে কাজ করে তবে আপনি আপনার এইচটিএমএলে (যা এনজি-থ্রাইতে প্রয়োজনীয় বলে মনে হচ্ছে) পরিষ্কারভাবে কন্ট্রোলার ঘোষণা করছেন না - যদি উদাহরণস্বরূপ, আপনি এনজিও-ভিউ সহ আপনার টেম্পলেটগুলি রেন্ডার করছেন এবং রুটপ্রাইভাইডারের মাধ্যমে সংশ্লিষ্ট রুটের জন্য প্রতিটি নিয়ামককে ঘোষণা করছেন।

জাতীয়

messageboard.directive('currentuser', ['CurrentUser', function(CurrentUser) {
  return function(scope, element, attrs) {
    CurrentUser.name = attrs.name;
  };
}]);

এইচটিএমএল

<div ng-app="app">
  <div class="view-container">
    <div ng-view currentuser name="testusername" class="view-frame animate-view"></div>
  </div>
</div>

এই সমাধানে, কারেন্ট ইউসার এমন একটি পরিষেবা যা কোনও নামক সংযোজন করতে পারে, তার সাথে সাথে নামের নামটি উপলব্ধ।

দুটি নোট:

  • আমি যে সমস্যার মুখোমুখি হয়েছি তা হ'ল নামটি নিয়ামক লোডের পরে সেট হয়ে যায়, তাই কন্ট্রোলআউন্ড হিসাবে আমি নিয়ামকের স্কোপে ব্যবহারকারীর নাম উপস্থাপন করার আগে একটি সংক্ষিপ্ত সময়সীমা শেষ করি। .Name পরিষেবাটিতে সেট হওয়া অবধি অপেক্ষা করার কোনও ঝিমঝিম উপায় কি আছে?

  • এঙ্গুলারের বাইরে থাকা সমস্ত প্রমাণীকরণের সাথে একজন বর্তমান ব্যবহারকারীকে আপনার কৌণিক অ্যাপে প্রবেশ করার খুব সহজ উপায় বলে মনে হয়। আপনার অ্যাংুলার অ্যাপটি বুটস্ট্র্যাপ করা আছে এমন এইচটিএমএল-এ অন লগইন করা ব্যবহারকারীদের আটকাতে আপনার আগে_ ফিল্টার থাকতে পারে এবং এইচটিএমএল-র মধ্যে আপনি কেবল লগইন করা ব্যবহারকারীর নাম এমনকি তাদের আইডি ইন্টারপোলেট করতে পারবেন যদি আপনি ব্যবহারকারীর বিশদ সাথে ইন্টারেক্ট করতে চান আপনার কৌনিক অ্যাপ্লিকেশন থেকে HTTP অনুরোধের মাধ্যমে। আপনি লগ-ইন না থাকা ব্যবহারকারীদের একটি ডিফল্ট 'অতিথি ব্যবহারকারী' এর সাথে অ্যাংুলার অ্যাপ্লিকেশন ব্যবহার করার অনুমতি দিতে পারেন। এই দৃষ্টিভঙ্গিটি কেন খারাপ হবে সে সম্পর্কে যে কোনও পরামর্শই স্বাগত হবে - বোধশক্তি বোধ করা খুব সহজ বলে মনে হয়!)


0

এটি @ মিশেল টিলার চমৎকার উত্তরের একটি সম্প্রসারণ । তার উত্তরটি $attrsনিয়ামকটিতে ইনজেক্ট করে ভিউ থেকে পরিবর্তনশীল সূচনা করার জন্য কাজ করে। $routeProviderআপনি যখন রাউটিংয়ে নেভিগেট করবেন তখন একই নিয়ন্ত্রককে কল করা হলে সমস্যা দেখা দেয় । তারপরে আপনি ইনজেক্টর ত্রুটি পান Unknown provider : $attrsProviderকারণ $attrsভিউ সংকলন করা হলে কেবল ইঞ্জেকশনের জন্য উপলব্ধ available সমাধানটি হ'ল ভেরিয়েবলটি (ফু) মাধ্যমে পাস করা $routeParamsযখন রুট $attrsথেকে নিয়ামক আরম্ভ করার সময় এবং দর্শন থেকে নিয়ামক আরম্ভ করার মাধ্যমে । এখানে আমার সমাধান।

রুট থেকে

$routeProvider.
        when('/mypage/:foo', {
            templateUrl: 'templates/mypage.html',
            controller: 'MyPageController',
            caseInsensitiveMatch: true,
            resolve: {
                $attrs: function () {
                    return {};
                }
            }
        });

এটি যেমন url পরিচালনা করে '/mypage/bar'। যেমন আপনি দেখতে পাচ্ছেন ফু ইউআরএল পরম দ্বারা পাস হয়ে গেছে এবং আমরা $injectorকোনও ফাঁকা বস্তু সরবরাহ করি $attrsযাতে কোনও ইনজেক্টর ত্রুটি নেই।

ভিউ থেকে

<div ng-controller="MyPageController" data-foo="bar">

</div>

এখন নিয়ামক

var app = angular.module('myapp', []);
app.controller('MyPageController',['$scope', '$attrs', '$routeParams'], function($scope, $attrs, $routeParams) {
   //now you can initialize foo. If $attrs contains foo, it's been initialized from view
   //else find it from $routeParams
   var foo = $attrs.foo? $attrs.foo : $routeParams.foo;
   console.log(foo); //prints 'bar'

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