جاوااسکریپت - AngularJS - وقتی از ng-model استفاده میشود، مقدار ویژگی value در یک جعبه متن ورودی نادیده گرفته میشود؟

با استفاده از AngularJS اگر من مقدار یک کادر ورودی متن ساده را به چیزی مانند "bob" در زیر تنظیم کنم، مقدار نمایش داده نمیشود اگر صفت ng-model اضافه شود.

    <input type="text"
           id="rootFolder"
           ng-model="rootFolders"
           disabled="disabled"
           value="Bob"
           size="40"/>

کسی راهحلی ساده میشناسد که بتوان این ورودی را به صورت پیشفرض روی چیزی تنظیم کرد و ng-model را نگه داشت؟ من تلاش کردم از ng-bind با مقدار پیشفرض استفاده کنم اما به نظر میرسد آن هم کار نمیکند.

پاسخ شماره ۱

این رفتار مورد نظر است، شما باید مدل را در کنترلر تعریف کنید، نه در نما.

<div ng-controller="Main">
  <input type="text" ng-model="rootFolders">
</div>


function Main($scope) {
  $scope.rootFolders = 'bob';
}

پاسخ شماره ۲

واجتا «روش انگولار» را توضیح داد، اما اگر واقعاً نیاز دارید این کار را انجام دهید، @urbanek اخیراً یک راهحل جایگزین با استفاده از ng-init منتشر کرده است:

<input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" value="Bob">

https://groups.google.com/d/msg/angular/Hn3eztNHFXw/wk3HyOl9fhcJ

پاسخ شماره ۳

بازنویسی دستور ورودی به نظر میرسد که کار را انجام میدهد. من تغییرات جزئی در کد دن هانساکر ایجاد کردم:

• اضافه شدن یک بررسی برای ngModel قبل از تلاش برای استفاده از $parse().assign() روی فیلدهایی که ویژگی ngModel ندارند.
• ترتیب پارامترهای تابع assign() اصلاح شد.

app.directive('input', function ($parse) {
  return {
    restrict: 'E',
    require: '?ngModel',
    link: function (scope, element, attrs) {
      if (attrs.ngModel && attrs.value) {
        $parse(attrs.ngModel).assign(scope, attrs.value);
      }
    }
  };
});

پاسخ شماره ۴

راه انگولار

راه درست در انگولار برای انجام این کار این است که یک برنامه تک صفحهای بنویسید، AJAX را در قالب فرم انجام دهید، سپس آن را بهصورت پویا از مدل پر کنید. به طور پیشفرض مدل از فرم پر نمیشود زیرا مدل منبع واحد حقیقت است. در عوض، انگولار مسیر دیگر را میرود و سعی میکند فرم را از مدل پر کند.

اگر با این حال، وقت ندارید که از ابتدا شروع کنید

اگر شما یک برنامه نوشته شده دارید، این ممکن است شامل برخی تغییرات معماری نسبتاً سنگین باشد. اگر شما در حال تلاش برای استفاده از Angular برای بهبود یک فرم موجود هستید، نه ساختن یک برنامه تک صفحهای کامل از ابتدا، میتوانید مقدار را از فرم استخراج کرده و در زمان لینک با استفاده از یک دستورالعمل در scope ذخیره کنید. Angular سپس مقدار در scope را دوباره به فرم متصل کرده و آن را هماهنگ نگه میدارد.

استفاده از یک دستورالعمل

شما میتوانید از یک دستور نسبتاً ساده برای استخراج مقدار از فرم و بارگذاری آن در محدوده فعلی استفاده کنید. در اینجا من یک دستور initFromForm تعریف کردهام.

var myApp = angular.module("myApp", ['initFromForm']);

angular.module('initFromForm', [])
  .directive("initFromForm", function ($parse) {
    return {
      link: function (scope, element, attrs) {
        var attr = attrs.initFromForm || attrs.ngModel || element.attrs('name'),
        val = attrs.value;
        if (attrs.type === "number") {val = parseInt(val)}
        $parse(attr).assign(scope, val);
      }
    };
  });

میتوانید ببینید که من چندین گزینه جایگزین برای گرفتن نام مدل تعریف کردهام. شما میتوانید از این دستور همراه با دستور ngModel استفاده کنید، یا اگر مایل هستید میتوانید به چیزی غیر از $scope متصل شوید.

از آن اینطور استفاده کنید:

<input name="test" ng-model="toaster.test" value="hello" init-from-form />
{{toaster.test}}

توجه داشته باشید که این همچنین با جعبههای متنی و منوهای کشویی انتخاب نیز کار خواهد کرد.

<textarea name="test" ng-model="toaster.test" init-from-form>hello</textarea>
{{toaster.test}}