Angularjs - Tự động thay đổi dom bằng chỉ thị hoặc vật dụng?

Mục tiêu của tôi là hiểu cách sử dụng angularJS một cách chính xác. Tôi muốn có thể kết hợp một lựa chọn biến để tự động thay đổi cấu trúc DOM bằng cách sử dụng angularJS. Tôi không nghĩ rằng tôi khá hiểu các tài liệu mà góc cung cấp và tôi đã không tìm thấy bất kỳ ví dụ ở đây hay cách khác. Bất kỳ trợ giúp được đánh giá cao. Ý tưởng là tôi có trường hợp sử dụng này, nơi tôi lần đầu tiên bắt đầu với việc lựa chọn loại và từ loại đó được chọn, các yếu tố loại đầu vào thích hợp sẽ được tạo và sau đó được ghi lại sau đó với ng-model (từ văn bản đến hộp kiểm chẳng hạn), tất cả trong khi được điều khiển bởi bộ điều khiển angularjs để xác thực/hạn chế. Tôi đã quen với ý tưởng có các thành phần có khả năng sao chép trên trang và phá hủy và tạo mới với jQuery, nhưng tôi đã đọc rằng các trình điều khiển không nên có logic này và thay vào đó sẽ được tạo ra với các chỉ thị/widget. Tôi không thấy bất kỳ ví dụ về chỉ thị hoặc các vật dụng được thao tác theo cách này tuy nhiên vì vậy tôi thậm chí không chắc chắn làm thế nào để tiến hành. Tôi có thể sử dụng chỉ thị để thao tác DOM theo cách này, không chỉ một lần mà còn nhiều lần dựa trên yếu tố đã xem?Angularjs - Tự động thay đổi dom bằng chỉ thị hoặc vật dụng?

Ví dụ về những gì tôi muốn làm.

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

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

Chọn Loại 1:

Hiện khu vực 2 văn bản

Chọn Loại 2:

Hiển thị nhập số
Hiển thị một bảng chọn ngày

Xin cảm ơn,

-JR.

Nguồn

2012-08-07 kman

Đây là cách tôi sẽ làm. Lưu ý rằng đây chỉ là điểm khởi đầu. Vẫn còn một vấn đề ràng buộc với các giá trị cụ thể trong các đầu vào tương ứng. Tôi hy vọng nó sẽ giúp.

Markup:

<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>

Chỉ thị:

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 
    } 
});

Bộ điều khiển:

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'; 
    } 
    }; 
};

Nguồn

2012-08-08 23:06:38

Đây là nơi tôi đang đi, tôi ước gì có nhiều ví dụ mà tôi có thể học hỏi từ trang web của họ. Chức năng xem đó rất tiện dụng cho việc này. Đây chính là loại điều tôi đang tìm kiếm. Tôi đánh giá cao sự giúp đỡ! – kman

(liên quan đến mã chỉ thị :) Tôi nghĩ bạn không nên thêm một 'phạm vi. $ Watch' bên trong' render', vì bạn chỉ cần thiết lập '$ watch' một lần. – mik01aj

@ m01 nó thực sự nằm trong hàm liên kết. Có thực sự chạy nhiều lần không? –

Cách thả dễ dàng nhất mà tôi có thể nghĩ là làm việc này chỉ bằng cách sử dụng ng-show và 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>

Tất nhiên bạn có thể làm sạch này lên mà không đặt bất kỳ logic trong html, nhưng tôi không muốn đám mây vấn đề với công cụ bổ sung trong bộ điều khiển.

Để xác thực, hãy tham khảo forms documentation. Có thể bạn sẽ sử dụng hầu hết các AngularJS được xây dựng trong xác nhận hợp lệ với một số tùy chỉnh mà bạn xây dựng.

Đối với chỉ thị, các online docs là dày đặc, nhưng nó sẽ nhấp sau khi bạn đã thử nghiệm trong một thời gian. Đối với một giới thiệu nhẹ nhàng hơn, Jon Lindquist có một hướng dẫn thế giới xin chào trên YouTube. Chỉ thị chắc chắn là cách để thực hiện thao tác DOM trong Angular.

Nguồn

2012-08-08 01:45:14 Chris

Cảm ơn, tôi đã thử điều này và có vẻ như để làm việc, nhưng để lại trong tôi không thể dễ dàng thực hiện thay đổi thành phần tử khi tôi có nhiều hơn. Video đó chắc chắn đã giúp bạn! – kman

Angularjs - Tự động thay đổi dom bằng chỉ thị hoặc vật dụng?

Trả lời

Các vấn đề liên quan