কিভাবে একটি কাস্টম নির্দেশিকা থেকে পিতামাতা সুযোগ অ্যাক্সেস করতে*নিজস্ব সুযোগ সঙ্গে*AngularJS মধ্যে?




angularjs-directive (4)

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

আমি আসলেই কি চাই যে এটি মূলধারার সুযোগে $watch প্রকাশ করতে সক্ষম হবে। যদি আমি এটা করতে পারি, তাহলে আমি এখানে যা করতে চাইছি তা সম্পাদন করতে পারি: AngularJS - ভেরিয়েবলগুলির সাথে আংশিকভাবে কীভাবে রেন্ডার করা যায়?

একটি গুরুত্বপূর্ণ নোট যে একই অভিভাবক সুযোগ মধ্যে নির্দেশিকা পুনরায় ব্যবহারযোগ্য হতে হবে। অতএব ডিফল্ট আচরণ (সুযোগ: মিথ্যা) আমার জন্য কাজ করে না। আমি প্রতি নির্দেশের প্রতি একটি পৃথক সুযোগ প্রয়োজন, এবং তারপর আমি একটি পরিবর্তনশীল $watch প্রয়োজন যে পিতামাতার সুযোগ বসবাস।

একটি কোড নমুনা 1000 শব্দের মূল্য হয়, তাই:

app.directive('watchingMyParentScope', function() {
    return {
        require: /* ? */,
        scope: /* ? */,
        transclude: /* ? */,
        controller: /* ? */,
        compile: function(el,attr,trans) {
            // Can I get the $parent from the transclusion function somehow?
            return {
                pre: function($s, $e, $a, parentControl) {
                    // Can I get the $parent from the parent controller?
                    // By setting this.$scope = $scope from within that controller?

                    // Can I get the $parent from the current $scope?

                    // Can I pass the $parent scope in as an attribute and define
                    // it as part of this directive's scope definition?

                    // What don't I understand about how directives work and
                    // how their scope is related to their parent?
                },
                post: function($s, $e, $a, parentControl) {
                    // Has my situation improved by the time the postLink is called?
                }
            }
        }
    };
});

এখানে একটি কৌশল যা আমি একবার ব্যবহার করেছি: পিতামাতার সুযোগ রাখার জন্য "ডামি" নির্দেশিকা তৈরি করুন এবং পছন্দসই নির্দেশের বাইরে কোথাও রাখুন। কিছুটা এইরকম:

module.directive('myDirectiveContainer', function () {
    return {
        controller: function ($scope) {
            this.scope = $scope;
        }
    };
});

module.directive('myDirective', function () {
    return {
        require: '^myDirectiveContainer',
        link: function (scope, element, attrs, containerController) {
            // use containerController.scope here...
        }
    };
});

এবং তারপর

<div my-directive-container="">
    <div my-directive="">
    </div>
</div>

সম্ভবত সবচেয়ে আনন্দদায়ক সমাধান না, কিন্তু এটি কাজ সম্পন্ন।


নিয়ামক পদ্ধতি অ্যাক্সেস মানে নির্দেশক নিয়ামক / লিঙ্ক / সুযোগ থেকে পিতা বা মাতা সুযোগ উপর একটি পদ্ধতি অ্যাক্সেস মানে।

নির্দেশিকাটি যদি পিতামাতার সুযোগ ভাগ করে নেওয়ার / উত্তরাধিকারসূত্রে পৌঁছানো হয় তবে এটি কেবলমাত্র একটি পিতা-মাতাকে স্কোপ পদ্ধতিতে আহ্বান করা সহজ।

আপনি বিচ্ছিন্ন নির্দেশিকা সুযোগ থেকে অভিভাবক সুযোগ পদ্ধতি অ্যাক্সেস করতে চান যখন একটু বেশি কাজ প্রয়োজন।

বিচ্ছিন্ন নির্দেশিকা দশা থেকে অভিভাবক সুযোগ পদ্ধতিটি বা পিতা-মাতা স্কোপ ভেরিয়েবলগুলি দেখতে ( বিকল্প # 6 বিশেষভাবে) কয়েকটি বিকল্প রয়েছে (নীচের তালিকাভুক্ত হতে পারে)।

উল্লেখ্য , আমি এই উদাহরণগুলিতে link function ব্যবহার করেছি কিন্তু প্রয়োজনীয়তার ভিত্তিতে আপনি একটি directive controller ব্যবহার করতে পারেন।

বিকল্প 1. অবজেক্ট আক্ষরিক এবং নির্দেশনা HTML টেমপ্লেট মাধ্যমে

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <p> Directive Content</p>
    <sd-items-filter selected-items="selectedItems" selected-items-changed="selectedItemsChanged(selectedItems)" items="items"> </sd-items-filter>


    <P style="color:red">Selected Items (in parent controller) set to: {{selectedItemsReturnedFromDirective}} </p>

  </body>

</html>

itemfilterTemplate.html

<select ng-model="selectedItems" multiple="multiple" style="height: 200px; width: 250px;" ng-change="selectedItemsChanged({selectedItems:selectedItems})" ng-options="item.id as item.name group by item.model for item in items | orderBy:'name'">
  <option>--</option>
</select>

app.js

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

app.directive('sdItemsFilter', function() {
  return {
    restrict: 'E',
    scope: {
      items: '=',
      selectedItems: '=',
      selectedItemsChanged: '&'
    },
    templateUrl: "itemfilterTemplate.html"
  }
})

app.controller('MainCtrl', function($scope) {
  $scope.name = 'TARS';

  $scope.selectedItems = ["allItems"];

  $scope.selectedItemsChanged = function(selectedItems1) {
    $scope.selectedItemsReturnedFromDirective = selectedItems1;
  }

  $scope.items = [{
    "id": "allItems",
    "name": "All Items",
    "order": 0
  }, {
    "id": "CaseItem",
    "name": "Case Item",
    "model": "PredefinedModel"
  }, {
    "id": "Application",
    "name": "Application",
    "model": "Bank"
    }]

});

কাজ plnkr: http://plnkr.co/edit/rgKUsYGDo9O3tewL6xgr?p=preview

অপশন # 2। বস্তু আক্ষরিক এবং নির্দেশিকা লিঙ্ক / সুযোগ মাধ্যমে

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <p> Directive Content</p>
    <sd-items-filter selected-items="selectedItems" selected-items-changed="selectedItemsChanged(selectedItems)" items="items"> </sd-items-filter>


    <P style="color:red">Selected Items (in parent controller) set to: {{selectedItemsReturnedFromDirective}} </p>

  </body>

</html>

itemfilterTemplate.html

<select ng-model="selectedItems" multiple="multiple" style="height: 200px; width: 250px;" 
 ng-change="selectedItemsChangedDir()" ng-options="item.id as item.name group by item.model for item in items | orderBy:'name'">
  <option>--</option>
</select>

app.js

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

app.directive('sdItemsFilter', function() {
  return {
    restrict: 'E',
    scope: {
      items: '=',
      selectedItems: '=',
      selectedItemsChanged: '&'
    },
    templateUrl: "itemfilterTemplate.html",
    link: function (scope, element, attrs){
      scope.selectedItemsChangedDir = function(){
        scope.selectedItemsChanged({selectedItems:scope.selectedItems});  
      }
    }
  }
})

app.controller('MainCtrl', function($scope) {
  $scope.name = 'TARS';

  $scope.selectedItems = ["allItems"];

  $scope.selectedItemsChanged = function(selectedItems1) {
    $scope.selectedItemsReturnedFromDirective = selectedItems1;
  }

  $scope.items = [{
    "id": "allItems",
    "name": "All Items",
    "order": 0
  }, {
    "id": "CaseItem",
    "name": "Case Item",
    "model": "PredefinedModel"
  }, {
    "id": "Application",
    "name": "Application",
    "model": "Bank"
    }]
});

কাজ plnkr: http://plnkr.co/edit/BRvYm2SpSpBK9uxNIcTa?p=preview

অপশন # 3। ফাংশন রেফারেন্স এবং নির্দেশিকা HTML টেমপ্লেট মাধ্যমে

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <p> Directive Content</p>
    <sd-items-filter selected-items="selectedItems" selected-items-changed="selectedItemsChanged" items="items"> </sd-items-filter>


    <P style="color:red">Selected Items (in parent controller) set to: {{selectedItemsReturnFromDirective}} </p>

  </body>

</html>

itemfilterTemplate.html

<select ng-model="selectedItems" multiple="multiple" style="height: 200px; width: 250px;" 
 ng-change="selectedItemsChanged()(selectedItems)" ng-options="item.id as item.name group by item.model for item in items | orderBy:'name'">
  <option>--</option>
</select>

app.js

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

app.directive('sdItemsFilter', function() {
  return {
    restrict: 'E',
    scope: {
      items: '=',
      selectedItems:'=',
      selectedItemsChanged: '&'
    },
    templateUrl: "itemfilterTemplate.html"
  }
})

app.controller('MainCtrl', function($scope) {
  $scope.name = 'TARS';

  $scope.selectedItems = ["allItems"];

  $scope.selectedItemsChanged = function(selectedItems1) {
    $scope.selectedItemsReturnFromDirective = selectedItems1;
  }

  $scope.items = [{
    "id": "allItems",
    "name": "All Items",
    "order": 0
  }, {
    "id": "CaseItem",
    "name": "Case Item",
    "model": "PredefinedModel"
  }, {
    "id": "Application",
    "name": "Application",
    "model": "Bank"
    }]
});

কাজ plnkr: http://plnkr.co/edit/Jo6FcYfVXCCg3vH42BIz?p=preview

অপশন # 4। ফাংশন রেফারেন্স এবং নির্দেশিকা লিঙ্ক / সুযোগ মাধ্যমে

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <p> Directive Content</p>
    <sd-items-filter selected-items="selectedItems" selected-items-changed="selectedItemsChanged" items="items"> </sd-items-filter>


    <P style="color:red">Selected Items (in parent controller) set to: {{selectedItemsReturnedFromDirective}} </p>

  </body>

</html>

itemfilterTemplate.html

<select ng-model="selectedItems" multiple="multiple" style="height: 200px; width: 250px;" ng-change="selectedItemsChangedDir()" ng-options="item.id as item.name group by item.model for item in items | orderBy:'name'">
  <option>--</option>
</select>

app.js

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

app.directive('sdItemsFilter', function() {
  return {
    restrict: 'E',
    scope: {
      items: '=',
      selectedItems: '=',
      selectedItemsChanged: '&'
    },
    templateUrl: "itemfilterTemplate.html",
    link: function (scope, element, attrs){
      scope.selectedItemsChangedDir = function(){
        scope.selectedItemsChanged()(scope.selectedItems);  
      }
    }
  }
})

app.controller('MainCtrl', function($scope) {
  $scope.name = 'TARS';

  $scope.selectedItems = ["allItems"];

  $scope.selectedItemsChanged = function(selectedItems1) {
    $scope.selectedItemsReturnedFromDirective = selectedItems1;
  }

  $scope.items = [{
    "id": "allItems",
    "name": "All Items",
    "order": 0
  }, {
    "id": "CaseItem",
    "name": "Case Item",
    "model": "PredefinedModel"
  }, {
    "id": "Application",
    "name": "Application",
    "model": "Bank"
    }]

});

কাজ plnkr: http://plnkr.co/edit/BSqx2J1yCY86IJwAnQF1?p=preview

বিকল্প # 5: এনজি মডেলের মাধ্যমে এবং দুটি উপায় বাইন্ডিংয়ের মাধ্যমে আপনি প্যারেন্ট স্কোপ ভেরিয়েবলগুলি আপডেট করতে পারেন। । সুতরাং, আপনি কিছু ক্ষেত্রে পিতামাতার সুযোগ ফাংশন আহ্বান করার প্রয়োজন হতে পারে না।

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <p> Directive Content</p>
    <sd-items-filter ng-model="selectedItems" selected-items-changed="selectedItemsChanged" items="items"> </sd-items-filter>


    <P style="color:red">Selected Items (in parent controller) set to: {{selectedItems}} </p>

  </body>

</html>

itemfilterTemplate.html

<select ng-model="selectedItems" multiple="multiple" style="height: 200px; width: 250px;" 
 ng-options="item.id as item.name group by item.model for item in items | orderBy:'name'">
  <option>--</option>
</select>

app.js

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

app.directive('sdItemsFilter', function() {
  return {
    restrict: 'E',
    scope: {
      items: '=',
      selectedItems: '=ngModel'
    },
    templateUrl: "itemfilterTemplate.html"
  }
})

app.controller('MainCtrl', function($scope) {
  $scope.name = 'TARS';

  $scope.selectedItems = ["allItems"];

  $scope.items = [{
    "id": "allItems",
    "name": "All Items",
    "order": 0
  }, {
    "id": "CaseItem",
    "name": "Case Item",
    "model": "PredefinedModel"
  }, {
    "id": "Application",
    "name": "Application",
    "model": "Bank"
    }]
});

কাজ plnkr: http://plnkr.co/edit/hNui3xgzdTnfcdzljihY?p=preview

বিকল্প # 6: $watch এবং $watchCollection মাধ্যমে এটি উপরের সমস্ত উদাহরণগুলিতে items জন্য বাইন্ডিংয়ের দুটি উপায়, যদি আইটেমটি পিতামাতার সুযোগে সংশোধন করা হয় তবে নির্দেশের আইটেমগুলিও পরিবর্তনগুলি প্রতিফলিত করবে।

যদি আপনি পিতামাতার সুযোগ থেকে অন্য গুণাবলী বা বস্তুগুলি দেখতে চান তবে আপনি $watch এবং $watchCollection ব্যবহার করে এটি নীচে দেওয়া হিসাবে করতে পারেন

এইচটিএমএল

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{user}}!</p>
  <p>directive is watching name and current item</p>
  <table>
    <tr>
      <td>Id:</td>
      <td>
        <input type="text" ng-model="id" />
      </td>
    </tr>
    <tr>
      <td>Name:</td>
      <td>
        <input type="text" ng-model="name" />
      </td>
    </tr>
    <tr>
      <td>Model:</td>
      <td>
        <input type="text" ng-model="model" />
      </td>
    </tr>
  </table>

  <button style="margin-left:50px" type="buttun" ng-click="addItem()">Add Item</button>

  <p>Directive Contents</p>
  <sd-items-filter ng-model="selectedItems" current-item="currentItem" name="{{name}}" selected-items-changed="selectedItemsChanged" items="items"></sd-items-filter>

  <P style="color:red">Selected Items (in parent controller) set to: {{selectedItems}}</p>
</body>

</html>

স্ক্রিপ্ট app.js

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

app.directive('sdItemsFilter', function() {
  return {
    restrict: 'E',
    scope: {
      name: '@',
      currentItem: '=',
      items: '=',
      selectedItems: '=ngModel'
    },
    template: '<select ng-model="selectedItems" multiple="multiple" style="height: 140px; width: 250px;"' +
      'ng-options="item.id as item.name group by item.model for item in items | orderBy:\'name\'">' +
      '<option>--</option> </select>',
    link: function(scope, element, attrs) {
      scope.$watchCollection('currentItem', function() {
        console.log(JSON.stringify(scope.currentItem));
      });
      scope.$watch('name', function() {
        console.log(JSON.stringify(scope.name));
      });
    }
  }
})

 app.controller('MainCtrl', function($scope) {
  $scope.user = 'World';

  $scope.addItem = function() {
    $scope.items.push({
      id: $scope.id,
      name: $scope.name,
      model: $scope.model
    });
    $scope.currentItem = {};
    $scope.currentItem.id = $scope.id;
    $scope.currentItem.name = $scope.name;
    $scope.currentItem.model = $scope.model;
  }

  $scope.selectedItems = ["allItems"];

  $scope.items = [{
    "id": "allItems",
    "name": "All Items",
    "order": 0
  }, {
    "id": "CaseItem",
    "name": "Case Item",
    "model": "PredefinedModel"
  }, {
    "id": "Application",
    "name": "Application",
    "model": "Bank"
  }]
});

আপনি নির্দেশাবলী সম্পর্কে বিস্তারিত ব্যাখ্যা জন্য সবসময় AngularJs ডকুমেন্টেশন উল্লেখ করতে পারেন।


AngularJS এ সুযোগ প্রোটোটাইপ / প্রোটোটিকাল উত্তরাধিকার সূচনা কি দেখুন?

সংক্ষেপে: নির্দেশিকাটি তার অভিভাবকের ( $parent ) সুযোগটি অ্যাক্সেস করে এমন নির্দেশের উপর নির্ভর করে যা নির্দেশিকাটি তৈরি করে:

  1. ডিফল্ট ( scope: false ) - নির্দেশিকা একটি নতুন সুযোগ তৈরি করে না, তাই এখানে কোন উত্তরাধিকার নেই। নির্দেশিকা এর সুযোগ পিতামাতা / ধারক হিসাবে একই সুযোগ। লিংক ফাংশন, প্রথম পরামিতি (সাধারণত scope ) ব্যবহার করুন।

  2. scope: true - নির্দেশিকাটি একটি নতুন সন্তানের সুযোগ সৃষ্টি করে যা প্রোটোটিক্যালিকভাবে পিতামাতার সুযোগ থেকে উত্তরাধিকারী হয়। অভিভাবক সুযোগে সংজ্ঞায়িত করা সম্পত্তি নির্দেশিকা scope (প্রোটোটাইল উত্তরাধিকারের কারণে) পাওয়া যায়। শুধুমাত্র একটি আদিম সুযোগ সম্পত্তি থেকে লেখার বিষয়ে সতর্ক হোন - এটি নির্দেশিকা দশা (যা একই নামটির অভিভাবক সুযোগ সম্পত্তি লুকিয়ে / ছায়ায়) একটি নতুন সম্পত্তি তৈরি করবে।

  3. scope: { ... } - নির্দেশিকা একটি নতুন বিচ্ছিন্ন / বিচ্ছিন্ন সুযোগ সৃষ্টি করে। এটি প্রোটোটিক্যালি পিতামাতার সুযোগ উত্তরাধিকারী না। আপনি এখনও $parent ব্যবহার করে পিতামাতার সুযোগটি অ্যাক্সেস করতে পারেন তবে এটি সাধারণত সুপারিশ করা হয় না। এর পরিবর্তে, নির্দেশিকাটি = , @ , এবং নোটেশন ব্যবহার করে নির্দেশিকাটি ব্যবহার করা হয় এমন একই উপাদানটির অতিরিক্ত বৈশিষ্ট্যগুলির মাধ্যমে নির্দেশিকাটি কোন অভিভাবকের স্কোপ বৈশিষ্ট্যগুলি (এবং / অথবা ফাংশন) নির্দিষ্ট করা উচিত তা নির্দিষ্ট করা উচিত।

  4. transclude: true - নির্দেশিকা একটি নতুন "স্থানান্তরিত" সন্তানের সুযোগ সৃষ্টি করে, যা প্রোটোটাইপিক্যাল পিতামাতার সুযোগ থেকে উত্তরাধিকারসূত্রে প্রাপ্ত। নির্দেশ এছাড়াও একটি বিচ্ছিন্ন সুযোগ সৃষ্টি করে, স্থানান্তরিত এবং বিচ্ছিন্ন scopes ভাইবোন হয়। প্রতিটি সুযোগের $parent সম্পত্তি একই পিতামাতার সুযোগকে উল্লেখ করে।
    কৌণিক v1.3 আপডেট : নির্দেশ এছাড়াও একটি বিচ্ছিন্ন সুযোগ সৃষ্টি করে, স্থানান্তরিত সুযোগ এখন বিচ্ছিন্ন সুযোগ একটি শিশু। স্থানান্তরিত এবং বিচ্ছিন্ন scopes আর ভাইবোন নেই। স্থানান্তরিত সুযোগের $parent সম্পত্তি এখন বিচ্ছিন্ন সুযোগকে উল্লেখ করে।

উপরের লিঙ্কটি সব 4 ধরনের উদাহরণ এবং ছবি আছে।

আপনি নির্দেশকের কম্পাইল ফাংশনে সুযোগটি অ্যাক্সেস করতে পারবেন না (যেমন এখানে উল্লেখ করা হয়েছে: https://github.com/angular/angular.js/wiki/Understanding-Directives )। আপনি লিঙ্ক ফাংশন মধ্যে নির্দেশিকা এর সুযোগ অ্যাক্সেস করতে পারেন।

ওয়াচিং:

1. এবং ২ এর জন্য: সাধারণত আপনি কোন অভিভাবকের মাধ্যমে কোনও অভিভাবকের সম্পত্তিটি নির্দিষ্ট করে তা নির্দিষ্ট করেন, তারপরে $ এটি দেখুন:

<div my-dir attr1="prop1"></div>

scope.$watch(attrs.attr1, function() { ... });

আপনি যদি কোন বস্তুর সম্পত্তি দেখেন তবে আপনাকে $ parse ব্যবহার করতে হবে:

<div my-dir attr2="obj.prop2"></div>

var model = $parse(attrs.attr2);
scope.$watch(model, function() { ... });

3. উপরে (সুযোগ বিচ্ছিন্ন করুন), আপনি @ বা = নোটেশন ব্যবহার করে নির্দেশক সম্পত্তিটি নামটি দেখেন:

<div my-dir attr3="{{prop3}}" attr4="obj.prop4"></div>

scope: {
  localName3: '@attr3',
  attr4:      '='  // here, using the same name as the attribute
},
link: function(scope, element, attrs) {
   scope.$watch('localName3', function() { ... });
   scope.$watch('attr4',      function() { ... });

আপনি যদি ES6 ক্লাস এবং ControllerAs সিনট্যাক্স ব্যবহার করেন তবে আপনাকে কিছুটা ভিন্ন করতে হবে।

নীচের স্নিপেটটি দেখুন এবং মনে রাখবেন যে vm ControllerAs অভিভাবক হিসাবে vm ControllerAs মান যা প্যারেন্ট এইচটিএমএল ব্যবহার করে

myApp.directive('name', function() {
  return {
    // no scope definition
    link : function(scope, element, attrs, ngModel) {

        scope.vm.func(...)




angularjs-directive