2013-04-22 3 views
3

입력에 초기 값 "Toto"가 표시되도록 지시문에 적용 할 범위는 무엇입니까? 사실범위의 지시어가 입력의 ngmodel을 깨는 것

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 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> 
    <script src="app.js"></script> 
</head> 
<body ng-controller="MainCtrl"> 
    <input customattr type = "text" ng-model="value.name" /> 
</body> 
</html> 

JS 코드 :

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

app.controller('MainCtrl', function($scope) { 
    $scope.value = {"name":"Toto", "id":1}; 

}); 

    app.directive('customattr', function() { 
     return { 
      restrict: 'A', 
      scope: { 
      }, 
      link: function (scope, element, attrs) { 

      } 
     }; 
    }); 

Plunker 여기 : http://plnkr.co/edit/JxWElWhTeBbNpFHS0wYT

답변

8

을 나는이 중 하나입니다 생각 사람들이 AngularJS 지시문 및 범위로 자주 부딪히는 것들. 단일 DOM 요소가 유일한 한 범위와 관련된 AngularJS와에서

: 솔루션 우리는 AngularJS와 DOM 요소와 범위에 대한 한 가지를 이해할 필요에 따라 권장 사항을 이해합니다.

이것은 특정 요소에 대해 하나의 범위와 다른 범위로 다른 하위 집합에 대해 작업 할 수있는 특성의 하위 집합을 가질 수 없음을 의미합니다. 이것은 ng-model 속성이 <body> 요소에 정의 된 범위 (ng-controller 지시어로 정의)와 customattr이 다른 범위 (즉, 지시어로 작성된 격리 된 항목)로 작동하도록하려는 지점에서 수행하려는 작업입니다.).

1)를 사용 ng-model="$parent.value.name" 명시 적으로 특정 범위에 NG 모델 지시자를 가리 키도록 :

이 상황을 밖으로 기본적으로 2 가지 방법을 가지고있다. 그러나 이것은 부서지기 쉽고 명백하지 않습니다.

2) 특성 지시문에서 분리 된 범위를 제거하십시오. 엄지 손가락의 기준으로 입력 필드에서 특성으로 사용되어야하는 지시문에서 격리 된 범위를 사용하는 것에 대한 조언 (ng-model과 함께). $parse 서비스를 사용하여 여전히 특성 값을 가져올 수 있습니다.

+0

확인. customattr과 ng-model은 서로 다른 범위를 가지고 있지만 하나의 변수에 범위 바인딩 ("=")을 사용하여 도망 갈 수 있다고 생각했습니다. 바인딩의 요점이 두 가지 다른 범위를 조정하는 것이 아닌가? 요점은 범위가 제한되어 내 지시문이 좀 더 일반화되기를 바랍니다. – JohnCastle

+0

@JohnCastle은 두 가지 문제가 있습니다. 문제는 scope = {val : '='} 구문을 사용하면이 DOM 요소에 새롭고 격리 된 범위를 만들고 설명 된대로 문제가 발생한다는 것입니다. –

+0

@JohnCastle 한 가지 더 - 실제 사용 사례를 자세히 설명 할 수 있다면 솔루션을 제안 할 수 있습니다. –

관련 문제