Angular.js ile geliştirdiğimiz uygulamalarda bazen controller üzerinden gelen veriye view’ın nasıl tepki vereceğini kestiremediğimiz oluyor. Live edit özellikli bir geliştirme ortamınız yoksa controller koduna girip $scope değişkenlerini düzenleyerek uygulamamızın nasıl tepki gösterdiği gözlemlemeniz gerekebilir.

Örneğin sayfanızın bir bölümü ng-show ve/veya ng-hide direktifleriyle controller‘daki bir veri kaynağına veya bir fonksiyonun sonucuna bağlı olsun. Bu değer değiştiğinde sayfanızdaki ilgili kısmın gösterildiğinde ya da gizlendiğinde ne olacağını gözlemlemek istiyorsunuz.

Ya da en iyisi örneği boş verin burada hayatta aklıma gelmeyecek bir sebepten dolayı scope’a dışarıdan müdahale etmek istiyorsunuz diyelim :)

Tarayıcının konsolunu açıp :

var scope = angular.element($('.secilecek-eleman')[0]).scope()

burada JQuery ile seçim yaptım ama isterseniz document.getElementById() gibi native JS kodu ile de seçebilirsiniz. Dikkat etmeniz gereken nokta: ng-controller tagları arasında bir eleman seçmeniz gerekiyor.

scope.model_name = "abc" şeklinde veya daha da alt özellikler için scope.model_name.ozellik = "xyz" şeklinde istediğiniz gibi scope ile oynayabilirsiniz.

Fakat bir şey kaldı; dışardan yaptığımız bu müdahaleyi onaylamak:

scope.$apply() komutunu yazdığınızda yaptığınız değişikliğin sonucunu ekranda görebileceksiniz.