javascript पृथक गुंजाइश मूल्य क्लिक पर नहीं बदल रहा है




angularjs angularjs-directive (3)

ऐसा हो रहा है क्योंकि कोणीय "अभिव्यक्ति" के रूप में "पीटर" का मूल्यांकन करता है, यानी वह एक चर नाम जिसे वह हल नहीं कर सकता। यदि आप एक स्ट्रिंग पास करना चाहते हैं, तो बस इसके चारों ओर "

https://code.i-harness.com

मेरे पास एक सरल उदाहरण है, जहां मैं निर्देशित टेम्पलेटिंग द्वारा "पीटर" शब्द को दिखाना चाहता हूं। जब कोई व्यक्ति div पर एक क्लिक करता है - नाम "जूलियट" में बदल जाता है हालांकि मुझे कोई त्रुटि नहीं मिली है और स्क्रीन पर कुछ भी दिखाई नहीं दे रहा है।

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" ></script> 
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <people name="peter"></people>
    <people name="peter"></people>
    <script>
        //app declaration
        var app = angular.module('myApp', []);
        //controller declaration
        app.controller('myCtrl', function($scope) {
          //code goes here ... 
        });
        //directive declaration
        app.directive('people', function() {
          return {
            restrict: 'E',
            scope: {name:'='},
            template: '<div ng-click="name = \'Juliet\'">{{name}}</div>',
          }
        });
    </script> 
</body> 
</html>

क्योंकि पीटर एक चर है यदि आप "=" के साथ गुंजाइश का उपयोग करते हैं, तो आपको अपने वैल्यूएबल में कुछ वैल्यू को सेट करना होगा जैसे कि आपके नियंत्रक

app.controller('myCtrl', function($scope) {
  //code goes here ... 
  $scope.peter = 'John';
});

तब आप कुछ देखेंगे पीटर वैरिएबल का मूल्य नहीं था, इसलिए आपने कुछ नहीं देखा और 'जूलियट' को बदलने के लिए उस पर क्लिक नहीं किया जा सका


हां, मैंने थोड़ा सा पाया। वास्तव में,

1) सबसे पहले, मुझे '=' के बजाय '@' का उपयोग करना चाहिए था, क्योंकि मैं चाहता था कि निर्देश एक-दूसरे से अलग हो जाएं और किसी के क्लिक पर किसी अन्य निर्देश के अनुसार दिखाया गया न हो।

2) दूसरा, मुझे मॉडल का उपयोग करना चाहिए था (यहां $ scope.fname), स्ट्रिंग्स के बजाय निर्देशों में मान दिखाने के लिए। (जैसा कि कोबी चेन ने कहा था)

2) तीसरा, मुझे मूंछ टैग में अभिव्यक्तियों में एफएनडी को लपेटकर रखना चाहिए था।

पूरा कोड दिया गया है:

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" ></script> 
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <people name="{{fname}}"></people>
    <people name="{{fname}}"></people>
    <script>
        //app declaration
        var app = angular.module('myApp', []);
        //controller declaration
        app.controller('myCtrl', function($scope) {
          $scope.fname = "Peter";
        });
        //5 directive declaration
        app.directive('people', function() {
          return {
            restrict: 'E',
            scope: {name:'@'},
            template: '<div ng-click="name = \'Juliet\'">{{name}}</div>',
           }
        });
    </script> 
</body> 
</html>

इसके अलावा, यहां से सहायता ली गई:

AngularJS में डायरेक्टिव क्षेत्र में '@' और '=' के बीच अंतर क्या है?





angularjs-scope