Cara Memberikan Nilai pada Isolate Scope Angular JS Part 2

Halo teman teman pada tutorial Cara Memberikan Nilai Isolate scope pada Angular JS Part 1 kita telah membahas tentang Cara Memberikan Nilai Isolate scope dengan menggunakan “@” pada Angular JS, kalau teman teman masih bingung silahkan di lihat lagi materi sebelumnya pada Cara Memberikan Nilai Isolate scope pada Angular JS Part 1

Nah pada tutorial Cara Memberikan Nilai Isolate scope pada Angular JS Part 2 kali ini saya akan membahas tentang Cara Memberikan Nilai Isolate scope menggunakan “=” untuk two way binding.

Untuk menjalan script tersebut pada browser kita cukup menggantikan tanda “@” yang berada pada directive pada tutorial sebelumnya dan mengan tanda “=”

Oke teman teman biar lebih paham lagi kita langsung saja masuk ke study casenya tentang Cara Memberikan Nilai pada Isolate Scope Angular JS Part 2 menggunakan “=”

Langkah pertama yang teman teman lakukan yaitu silahkan buat sebuah folder baru yang bernama Cara Memberikan Nilai pada Isolate Scope Angular JS Part 2, didalam folder tersebut buatlah folder js dan di dalam 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="Dumet School";
}]);

Langkah berikutnya pada folder js silahkan buat folder baru lagi yang bernama directive, di dalam folder directive silahkan simpan script dibawah ini dengan nama directive.js

app.directive('oneWay',function(){
return {
restrict:'E',
scope:{
title:'='
},
template:'<h2>Title Inside : {{title}}</h2>',
link : function(scope,elem,attrs){
elem.bind('click',function(){
scope.$apply(function() {
scope.title = "JavaScript";
});
});
}
};
});

Dan pada script di atas akan kelihatan saya menggunakan tanda “=” unuk two way binding pada bagian title

Selanjutnya kita akan membuat sebuah file yang bernama app.js yang disimpan didalam folder js dan silahkan simpan script dibawah ini di dalam app.js tersebut

var app=angular.module('FirstApp',[]);

Berikutnya silahkan simpan script dibawah ini dengan nama index.html yang berada di dalam folder Cara Memberikan Nilai pada Isolate Scope Angular JS Part 2, yang telah kita buat 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="title"></one-way>
	</div>   
  	</body>
</html>

Selain itu kita tidak lagi menggunakan Ekspresi ( {{var}} ) saat menjalankan sebuah nilai yang terdapat pada controller .

Dan jika dijalankan pada browser maka hasilnya seperti dibawah ini