angularjs - शनश - समकालीन पाश्चात्य दर्शन




कैसे एक निर्देश है कि कोई गुंजाइश है अंदर एनजी मॉडल के लिए बाध्य करने के लिए? (2)

मैं एक निर्देश तैयार करना चाहता हूं जो एक फॉर्म तत्व (इनपुट, टेडेरेआ, चयन, इत्यादि) को लपेटता है और एनजी-मॉडल को बांधता है।

यहां उपयोग किया गया है:

<div ng-controller="formController">
    <field 
           type="text" 
           ng-model="model.CellPhoneNumber" 
           label="Cell phone" 
           mini-help="Sample: 123412341234" 
           required="please give us your number" 
           numeric 
           cellPhone="cell phone number is invalid" />
    <div>{{ model.CellPhoneNumber }}</div>
</div>
<script>
    app.cp.register('formController', ['$scope', function ($scope) {

    }]);
</script>

और यहां मेरा निर्देश है:

app.directive('field', function () {
        return {
            restrict: 'E',
            replace: 'true',
            scope: false,
            require: 'ngModel',
            template: '<div class="field">' +
                            '<label ng-if="label">{{ label }}</label>' +
                            '<input type="text" ng-if="type == \'text\'" required ng-model="ngModel" />' +
                            '<span class="mini help" ng-if="miniHelp">{{ miniHelp }}</span>' +
                            '<span class="messages">' +
                                '<span class="error message" ng-message="required" ng-if="requried">{{ required }}</span>' +
                            '</span>' +
                      '</div>',
            link: function (scope, element, attributes, ngModel) {
                scope.label = attributes.label;
                scope.miniHelp = attributes.miniHelp;
                scope.type = attributes.type;
                scope.required = attributes.required;
            }
        };
    });

हालांकि, यह काम नहीं करता है मैं बाध्यकारी एनजी-मॉडल में फंस गया हूँ मुझे पता है कि मैं स्कोप के माध्यम से एक बच्चे के दायरे में जा सकता हूं: {}, और चीजें काम करती हैं लेकिन मुझे गुंजाइश की जरूरत है: गलत।

यह कैसे करना है यह एक अच्छा नमूना है। लेकिन मुझे गुंजाइश के साथ कोई नमूना नहीं मिल सकता है: गलत।

एक डायरेक्टिव के अंदर डायनामिक एनजी-मॉडल बाइंडिंग


आप अपने वांछित समाधान के करीब हैं link फंक्शन के चौथे पैरामीटर ngModelController है जो ngModel से भिन्न है आपकी समस्या यह है कि आप इसे एक योजना के रूप में उपयोग कर रहे हैं ngModel आपको जो कुछ करना है, वह सिर्फ छोटे बदलावों में से एक है।

सबसे पहले, आपको अपने scope में ngModelController को बाध्य करने की आवश्यकता है। उसके बाद, ng-model="ngModel" बजाय, आप $viewValue बाँध $viewValue , जैसे: ng-model="ngModel.$viewValue" अंत में, आपको अपने डायरेक्टिव, field , ngModel के मूल्य को बदलने के लिए एक घड़ी बनाने की आवश्यकता है, अन्यथा यह एक दिशात्मक होगा

यहां काम कर रहे कोड है:

angular
  .module('myApp', [])
  .directive('field', function() {
    return {
      restrict: 'E',
      replace: 'true',
      scope: false,
      require: 'ngModel',
      template: '<div class="field">' +
        '<label ng-if="label">{{ label }}</label>' +
        '<input type="text" ng-if="type == \'text\'" required ng-model="ngModel.$viewValue" />' +
        '<span class="mini help" ng-if="miniHelp">{{ miniHelp }}</span>' +
        '<span class="messages">' +
        '<span class="error message" ng-message="required" ng-if="requried">{{ required }}</span>' +
        '</span>' +
        '</div>',
      link: function(scope, element, attributes, ngModel) {
        scope.label = attributes.label;
        scope.miniHelp = attributes.miniHelp;
        scope.type = attributes.type;
        scope.required = attributes.required;

        scope.ngModel = ngModel;
        scope.$watch(function() {
          return ngModel.$viewValue;
        }, function(newValue) {
          ngModel.$setViewValue(newValue);
          ngModel.$render();
        });
      }
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<div ng-app="myApp" ng-init="myModel = 'qwe'">
  <field type="text" ng-model="myModel" label="Cell phone" mini-help="Sample: 123412341234" required="please give us your number" numeric cellPhone="cell phone number is invalid"></field>

  <input type="text" ng-model="myModel">
  <p>{{ myModel }}</p>
</div>


आप हमेशा अपने कोण निर्देश में विशेषताओं का उपयोग कर सकते हैं





angularjs-scope