2016-03-17 15 views
6

vì vậy tôi có một thành phần có mẫu chứa biểu mẫu.thành phần angularjs nhận được một biểu mẫu bên trong mẫu

mycomponent.html:

<div> 
    <form name="myForm"> 
     <!-- more html code --> 
    </form> 
</div> 

Làm thế nào tôi có thể truy cập myForm bên trong bộ điều khiển thành phần? Hiện tại tôi đang tiêm $ scope để lấy nó từ đó. Hoặc đó là cách duy nhất để lấy biểu mẫu?

Chỉnh sửa: Thêm một số mã để minh họa tốt hơn trong javascript

angular.module('example') 
.component('myComponent', { 

    templateUrl: 'mycomponent.html', 
    controller: function($scope) { 
     $scope.myForm // This works 
     this.myForm // undefined, can I access it through the component scope instead of $scope somehow? 
    } 
}); 
+0

Nói chung, bạn ràng buộc bạn các yếu tố trong hình thức trong góc, chứ không phải đối phó với trực tiếp. Có lý do nào bạn cần truy cập vào phần tử biểu mẫu không? – Dave

+0

Tôi muốn kiểm tra $ e.t.c. nguyên sơ, nguyên sơ –

Trả lời

18

Các name thuộc tính của một hình thức là những gì sử dụng góc để quyết định những gì để ràng buộc vào. Vì vậy, nếu bạn đang sử dụng cú pháp controllerAs, bạn phải sử dụng trong tên mẫu:

<body ng-controller="MainCtrl as vm"> 
    <form name='vm.myForm'> 
    </form> 
    </body> 

này sẽ cho phép bạn tham khảo nó trong điều khiển của bạn mà không sử dụng $ phạm vi, nhưng chỉ sau khi bộ điều khiển có đã được tạo thành công:

app.controller('MainCtrl', function($scope, $timeout) { 

    var vm = this; 

    console.log(vm.myForm); // undefined 

    $timeout(function() { 
     console.log(vm.myForm); // FormController object 
    }, 100); 
}); 

Đây là một hoạt động plunk.

+1

Cảm ơn, đã làm việc với một sửa đổi nhỏ kể từ khi tôi đang sử dụng các thành phần và không có quyền truy cập đến xa như tôi biết "mainctrl như vm".

làm tên và sau đó có thể truy cập như thế này trong thành phần góc. –

+1

Bạn đang sử dụng góc 1,5? Nó tự động thêm '$ ctrl' làm giá trị mặc định cho' controllerAs', ngay cả đối với các thành phần. – Dave

+0

Có, góc 1,5 và tôi thấy. Tốt để biết cho tương lai! –

1

Sử dụng cú pháp tên mà còn là một móc vòng đời linh kiện postLink, chức năng đó được gọi là một lần một mẫu và điều khiển đã được kết nối thấy https://docs.angularjs.org/guide/component

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