[javascript] AngularJS-ng-model을 사용하면 입력 텍스트 상자의 값 속성이 무시됩니까?

JAVASCRIPT / 글쓴이

간단한 입력 텍스트 상자 값을 아래 “bob”과 같은 값으로 설정 한 경우 AngularJS 사용 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';
}

답변

Vojta는 “Angular way”를 설명했지만 실제로이 작업을 수행해야하는 경우 @urbanek은 최근 ng-init를 사용하여 해결 방법을 게시했습니다.

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

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

답변

입력 지시문을 재정의하면 작업을 수행하는 것 같습니다. Dan Hunsaker 의 코드 를 약간 변경했습니다 .

  • $parse().assign()ngModel 속성이없는 필드 에서 사용하기 전에 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는 다른 방향으로 가고 모델에서 양식을 채우려 고 시도합니다.

그러나 처음부터 다시 시작할 시간이 없다면

앱을 작성했다면 상당히 많은 아키텍처 변경이 필요할 수 있습니다. 전체 단일 페이지 앱을 처음부터 구성하는 대신 Angular를 사용하여 기존 양식을 향상시키려는 경우 지시문을 사용하여 양식에서 값을 가져 와서 링크 타임에 범위에 저장할 수 있습니다. 그러면 Angular는 범위의 값을 다시 폼에 바인딩하고 동기화 상태를 유지합니다.

지시문 사용

비교적 간단한 지시문을 사용하여 양식에서 값을 가져 와서 현재 범위로로드 할 수 있습니다. 여기에 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}}

답변

업데이트 : 내 컨트롤러에는 DOM 인식 코드가 포함되어있어 HTML을 선호하는 각도 규칙을 위반했습니다. @dmackerman은 내 대답에 대한 의견에서 지시문을 언급했으며 지금까지는 완전히 놓쳤습니다. 이 입력을 통해 Angular 또는 HTML 규칙 을 위반하지 않고이를 수행 하는 올바른 방법이 있습니다 .

요소의 값을 가져 와서 지시문에서 모델을 업데이트하는 데 사용하는 방법도 있습니다.

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

그리고:

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

물론 속성을 Angular 표현식으로 취급하는 데 value사용하는 $parse(attrs.value, scope)것을 포함하여 모델을 값으로 설정하기 전에 속성으로 더 많은 작업을 수행하도록 위의 지시문을 수정할 수 있습니다 value(개인적으로는 다른 [custom] 속성을 사용하지만, 표준 HTML 속성은 일관되게 상수로 취급됩니다).

또한 ng-model에 템플릿 데이터를 사용할 수있게 만드는 것과 비슷한 질문 이 있습니다.

답변

AngularJs ngModel 지시문을 사용하는 경우 value속성 값이 ngModel 필드에서 바인딩되지 않습니다. 기억 하십시오. 직접 입력해야하며이를 수행하는 가장 좋은 방법은 다음과 같습니다.

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

답변

이것은 이전 답변에 대한 약간의 수정입니다 …

$ 구문 분석이 필요하지 않습니다

angular.directive('input', [function () {
  'use strict';

  var directiveDefinitionObject = {
    restrict: 'E',
    require: '?ngModel',
    link: function postLink(scope, iElement, iAttrs, ngModelController) {
      if (iAttrs.value && ngModelController) {
        ngModelController.$setViewValue(iAttrs.value);
      }
    }
  };

  return directiveDefinitionObject;
}]);