Cara Memberikan Nilai Isolate Scope pada Angular JS Part 1

Halo teman teman pada tutorial kali ini saya akan menjelaskan tentang Cara Memberikan Nilai Isolate scope pada Angular JS Part 1, sebelum kita masuk kepada pembahasan sebaik nya kita harus tau dulu pengertian dari Isolate scope pada Angular JS tersebut.

Isolate pada angular JS merupakan sebuah scope yang yang sifatnya terisolasi berarti proses yang dilakukan hanya didalam area directive saja tanpa mempengaruhi proses yang lainya, biar lebih paham lagi kita langsung aja masuk ke study casenya tentang Cara Memberikan Nilai Isolate scope pada Angular JS, Cara Memberikan Nilai Isolate scope pada Angular JS ada dua cara di antaranya yaitu menggunakan :

1. “@” untuk one way text binding
2. “=” untuk two way binding

Nah untuk pembahasan Cara Memberikan Nilai Isolate scope pada Angular JS Part 1 kali ini saya akan membahas tentang @ untuk one way text binding terlebih dahulu, @ untuk one way text binding, yaitu nilai yang dikirim ke isolate scope yang berasal dari directive, biar lebih paham lagi kita langsung aja masuk ke study case nya tentang Cara Memberikan Nilai Isolate scope pada Angular JS Part 1.

Langkah yang pertama silahkan teman teman buat sebuah folder baru dengan nama Cara Memberikan Nilai Isolate scope pada Angular JS Part 1 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 dengannama 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 = "Dumet School";
});
});
}
};
});

Dan nanti pada browser akan menampilkan sebuah pesan yang berupa title inside : {{title}} dengan variable 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 Isolate scope pada Angular JS Part 1, yang telah kita buat sebelumnya.

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar Angular Js</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="Kursus"></one-way>
<one-way title="{{title}}"></one-way>
</div>
    
  </body>
</html>

Jika dijalankan pada bowser maka hasilnya seperti dibawah ini :

• Tampilan awal

• Tampilan ketika formnya telah di isi

• Dan ketika isi dari form tersebut kita klik maka hasilnya seperti dibawah ini

• Dan silahkan coba klik pada bagian kursus maka akan berubah menjadi dumet school seperti dibawah ini.

Bagai mana teman teman cukup mudah bukan Cara Memberikan Nilai Isolate scope pada Angular JS Part 1
Sekian tutorial saya kali ini mengenai Cara Memberikan Nilai Isolate scope pada Angular JS Part 1
Terimakasih.