如何在Zeppelin中使用角度控制器

Question

我是Zeppelin的新手，最近我正在研究如何在當前項目中使用Zeppelin。我想在Zeppelin段落中添加一個Angular控制器。但它失敗了。你能給我一些提示如何解決它嗎？以下是我的代碼。

println(s""" 
%angular 
<script> 
    angular.module('zeppelinWebApp').controller('myNewController', myNewController); 

    function myNewController() { 

     var vm = this; 
     vm.publicVariable = {}; 

     // Controller's public functions 
     vm.myControllerPublicFunction = myControllerPublicFunction; 

     _init(); 

     function myControllerPublicFunction() { 
      publicVariable = publicVariable + 1; 
     } 

     function _init() { 
      vm.myControllerPublicFunction(); 
     } 
    } 
</script> 

<div ng-controller="myNewController as newCtrl"> 
    <div ng-click="newCtrl.myControllerPublicFunction" ng-bind='newCtrl.publicVariable'></div> 
</div> 
""") 

Answer 1

一直在努力與此自己。最佳答案我想出來的是抓使用jQuery一個範圍的元素來創建一個僞控制器（基於關閉this GitHub gist）：

println(s""" 
%angular 
<script> 
    var element = $('#ctrlHook'); 
    var scope = angular.element(element.parent('.ng-scope')).scope().compiledScope; 


    (function myNewController() { 

     var vm = scope; 
     vm.publicVariable = 0; 

     // Controller's public functions 
     vm.myControllerPublicFunction = myControllerPublicFunction; 

     _init(); 

     function myControllerPublicFunction() { 
      vm.publicVariable = vm.publicVariable + 1; 
     } 

     function _init() { 
      vm.myControllerPublicFunction(); 
     } 
    })(); 
</script> 

<div id="ctrlHook"> 
    <div ng-click="myControllerPublicFunction" ng-bind='publicVariable'></div> 
</div> 
""") 

當然你可以刪除功能塊和剛上scope直接操作而不是在vm，但我留下來堅持你的原始示例儘可能（我整理了一些變量引用，你打電話給publicVariable而不是vm.publicVariable並把它當作一個數字而不是它初始化的對象） 。

NB：我無法確認變量是否會改變自己會修復您的原始代碼，但我已經測試了使用上述方法來抓取範圍，它似乎工作。希望它能幫助你。