Angularjs Call Controller Function From Html

MUAZHAN

3 min read

·

Jul 01, 2024

44

Share

Memanggil Fungsi Controller dalam AngularJS dari HTML

AngularJS adalah framework JavaScript yang populer untuk membangun aplikasi web single-page. Dalam AngularJS, controller bertanggung jawab untuk mengelola data dan logika aplikasi. Controller biasanya didefinisikan dalam file JavaScript terpisah, dan dihubungkan ke HTML menggunakan directive ng-controller.

Cara Memanggil Fungsi Controller dari HTML

Untuk memanggil fungsi yang ada di controller dari HTML, kita dapat menggunakan expression binding dengan simbol {{ }}. Berikut adalah contohnya:

  
  


  

    Say Hello
    
{{ message }}
  

  

Pada contoh di atas:

1. ng-controller="myController": Directive ini menghubungkan elemen HTML dengan controller bernama myController.
2. ng-click="sayHello()": Directive ini memanggil fungsi sayHello() di controller saat tombol diklik.
3. {{ message }}: Expression binding ini menampilkan nilai variabel message dari controller.

Penjelasan Lebih Lanjut

• Directive ng-click: Directive ini digunakan untuk melampirkan event handler ke sebuah elemen HTML. Dalam contoh ini, event handler adalah sayHello().
• $scope: $scope adalah objek yang digunakan untuk menghubungkan controller dengan view. Fungsi dan data dalam controller dapat diakses melalui $scope.

Contoh lain:

• Menggunakan fungsi dengan parameter:

Update Message

$scope.updateMessage = function(newMessage) {
  $scope.message = newMessage;
};

• Menggunakan event handler lain:

Nama: {{ name }}

$scope.name = '';

Kesimpulan

Memanggil fungsi controller dari HTML dalam AngularJS menggunakan ng-click atau directive lainnya, dan expression binding {{ }} untuk menampilkan data dari controller. Hal ini membantu untuk memisahkan logika dan tampilan aplikasi web Anda, dan membuat kode menjadi lebih terstruktur dan mudah dipelihara.