Angularjs - 지시어 또는 위젯으로 dom을 동적으로 변경 하시겠습니까?

내 목표는 angularJS를 올바르게 사용하는 방법을 이해하는 것입니다. angularJS를 사용하여 DOM 구조를 동적으로 변경하려면 변수를 선택해야합니다. 나는 모난이 제공하는 문서를 아주 잘 이해하고 있다고 생각하지 않으며 여기 또는 다른 예를 발견하지 못했다. 어떤 도움을 주셔서 감사합니다.Angularjs - 지시어 또는 위젯으로 dom을 동적으로 변경 하시겠습니까?

아이디어는 내가 처음에 유형의 선택으로 시작하고 선택한 유형에서 적절한 입력 유형 요소가 생성되고 나중에 ng- 모델로 (텍스트 영역에서 예를 들어 체크 박스), 모든 시간 동안 유효성 검사/제한을 위해 angularjs 컨트롤러에 의해 제어됩니다. 나는 페이지 상에 복제 가능한 요소를 가지고 jQuery로 새로운 것을 파괴하고 새로운 것을 만드는 아이디어에 익숙하지만, 컨트롤러가이 논리를 가져서는 안되며 지시어/위젯으로 만들어야한다는 것을 읽었습니다. 나는 이런 식으로 조작되는 지시어 나 위젯의 예는 보지 못한다. 그러나 나는 어떻게 나아갈 지조차 확신하지 못한다. 지시어를 사용하여 감시 된 요소를 기반으로 한 번만이 아니라 여러 번이 방식으로 DOM을 조작 할 수 있습니까?

내가 뭘하고 싶은지의 예.

$scope.types = ['Type1','Type2'] 

// something along the lines of... 
$scope.layouts = {'Type1':['textarea','textarea'], 'Type2':['numeric','datepicker']}

유형 선택 1 :

보기 2 텍스트 영역

유형 선택 2 :

는
이 날짜 선택기를 표시 숫자 입력을 표시

감사합니다.

-JR.

출처

2012-08-07 kman

이렇게하면됩니다. 이것은 단지 출발점 일뿐입니다. 해당 입력에 특정 값을 구속하는 문제가 여전히 있습니다. 나는 그것이 도움이되기를 바랍니다.

마크 업 :

<html ng-app="App" ng-controller="MainCtrl"> 

<body> 

    <component index="0"></component> 
    <component index="1"></component> 
    Current type: {{type}} 
    <button ng-click="toggleType()">Toggle</button> 

</body> 

</html>

지침 :

var ngApp = angular.module('App', []).directive('component', function() { 
    var link = function(scope, element, attrs) { 
    var render = function() { 
     var t = scope.layouts[scope.type][attrs.index]; 
     if (t === 'textarea') { 
     element.html('<' + t + ' /><br>'); 
     } 
     else { 
     element.html('<input type="' + t + '"><br>'); 
     } 
    }; 
    //key point here to watch for changes of the type property 
    scope.$watch('type', function(newValue, oldValue) { 
     render(); 
    }); 

    render(); 
    }; 
    return { 
    restrict : 'E', 
    link : link 
    } 
});

컨트롤러 :

var MainCtrl = function MainCtrl($scope) { 
    $scope.type = 'Type1'; 
    $scope.types = [ 'Type1', 'Type2' ]; 
    $scope.layouts = { 
    'Type1' : [ 'textarea', 'textarea' ], 
    'Type2' : [ 'number', 'text' ] 
    }; 

    $scope.toggleType = function() { 
    if ($scope.type === 'Type1') { 
     $scope.type = 'Type2'; 
    } 
    else { 
     $scope.type = 'Type1'; 
    } 
    }; 
};

출처

2012-08-08 23:06:38

이것은 내가 가고있는 곳입니다. 나는 그들의 사이트에서 배울 수있는 더 많은 예제가 있었으면 좋겠습니다. 그 시계 기능은 매우 편리합니다. 정확히 내가 찾고있는 유형입니다. 도움에 감사드립니다! – kman

(지시어 코드에 관한 것)'$ watch '를 한 번만 설정해야하기 때문에'render' 안에'scope. $ watch'를 추가하지 말아야한다고 생각합니다. – mik01aj

@ m01 실제로 링크 기능에 있습니다. 실제로 한 번 이상 실행됩니까? –

내가 가장 쉽게 생각할 수있는 것은 단순히 ng-show와 ng-hide를 사용하는 것입니다.

http://jsfiddle.net/cfchase/Xn7PA/

<select ng-model="selected_type" ng-options="t for t in types"> 
</select> 

<div ng-show="selected_type=='Type1'"> 
    <input type="text" id="text1" ng-model="text1"/> 
    <input type="text" id="text2" ng-model="text2"/> 
</div> 

<div ng-show="selected_type=='Type2'"> 
    <input type="number" id="numeric1" ng-model="numeric1"/> 
    <input type="date" id="date1" ng-model="date1"/> 
</div>

은 물론 당신은 HTML에서 어떤 논리를주지 않고이 문제를 정리 할 수 있지만 컨트롤러에 여분의 물건이 문제를 클라우드 싶지 않았다.

유효성을 검사하려면 forms documentation을 참조하십시오. 아마도 AngularJS를 사용하여 유효성 검사를 수행하고 사용자 정의 빌드를 사용할 것입니다.

지시어의 경우 online docs은 밀도가 높지만 잠시 실험 한 후에는 클릭합니다. 젠드 소개를 위해 Jon Lindquist는 YouTube에 대한 안녕 세계 자습서를 가지고 있습니다. 지시어는 Angular에서 DOM 조작을 수행하는 방법입니다.

출처

2012-08-08 01:45:14 Chris

덕분에, 나는 이것을 시도하고 작동하는 것 같다,하지만 쉽게 만들 날 수없는 잎 한 번 더 요소를 변경합니다. 그 비디오가 확실히 도움이되었습니다! – kman

Angularjs - 지시어 또는 위젯으로 dom을 동적으로 변경 하시겠습니까?

답변

관련 문제