Cara Memberikan Nilai pada Isolate Scope Angular JS Part 2
Halo teman teman di panduan Cara Memberikan Nilai Isolate scope pada Angular JS Part 1 kita telah membahas mengenai Cara Memberikan Nilai Isolate scope dengan menggunakan “@” di Angular JS, kalau teman teman masih bingung silahkan di lihat lagi bahan sebelumnya di Cara Memberikan Nilai Isolate scope pada Angular JS Part 1
Nah di panduan Cara Memberikan Nilai Isolate scope di Angular JS Part 2 kali ini saya akan membahas mengenai Cara Memberikan Nilai Isolate scope menggunakan “=” bagi two way binding.
Bagi menjalan script tersebut di browser kita lumayan menggantikan tanda “@” yang berada di directive di panduan sebelumnya dan mengan tanda “=”
Oke teman teman biar lebih paham lagi kita seketika saja masuk ke study casenya mengenai Cara Memberikan Nilai di Isolate Scope Angular JS Part 2 menggunakan “=”
Langkah pertama-tama yang teman teman lakukan yaitu silahkan bikin sebuah folder baru yang bernama Cara Memberikan Nilai di Isolate Scope Angular JS Part 2, didalam folder tersebut buatlah folder js dan di pada folder js buatlah sebuah folder yang bernama controllers, didalam folder controller silahkan simpan script dibawah ini dengan nama MainController.js
app.controller('MainController',['$scope', function($scope){
$scope.dumet=Source Code Aplikasi;
}]);Langkah berikutnya di folder js silahkan bikin folder baru lagi yang bernama directive, di pada folder directive silahkan simpan script dibawah ini dengan nama directive.js
app.directive('oneWay',function(){
return {
restrict:'E',
scope:{
title:'='
},
tampilan:'<h2>Title Inside : {{title}}</h2>',
link : function(scope,elem,attrs){
elem.bind('click',function(){
scope.$apply(function() {
scope.title = JavaScript;
});
});
}
};
});Dan di script di atas akan kelihatan saya menggunakan tanda “=” unuk two way binding di bagian title
Berikutnya kita akan membangun sebuah file yang bernama app.js yang disimpan didalam folder js dan silahkan simpan script dibawah ini di pada app.js tersebut
var app=angular.module('FirstApp',[]);Berikutnya silahkan simpan script dibawah ini dengan nama index.html yang berada di pada folder Cara Memberikan Nilai di Isolate Scope Angular JS Part 2, yang telah kita bikin sebelumnya.
<!DOCTYPE html>
<html>
<head>
<title>Belajar AngularJs</title>
</head>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js></script>
<script type=text/javascript src=js/app.js></script>
<script type=text/javascript src=js/directive/directive.js></script>
<script type=text/javascript src=js/controllers/MainController.js></script>
<body ng-app=FirstApp>
<div ng-controller=MainController>
<input type=text ng-model=title/> </br> </br>
<one-way title=Cara Memberikan Nilai di Isolate Scope Angular JS Part 2></one-way>
</div>
</body>
</html>
Selain itu kita tak lagi menggunakan Ekspresi ( {{var}} ) ketika menjalankan sebuah nilai yang terdapat di controller .
Dan sekiranya dijalankan di browser karenanya hasilnya seperti dibawah ini
- Tampilan awal
- Tampilan ketika formnya telah kita isi
- Dan ketika isi dari form tersebut ki klik karenanya akan menjadi seperti dibawah ini
Bagai mana teman teman lumayan gampang bukan, Demikian panduan saya kali ini mengenai, Cara Memberikan Nilai di Isolate Scope Angular JS Part 2, nya.
semoga bermanfaat
Terimakasih
Cara Memberikan Nilai Isolate Scope pada Angular JS Part 1
Sumber https://kursuswebsite.org
