2017-01-28 22 views
2

Я новичок в Zeppelin, недавно я изучаю, как использовать Zeppelin в моем текущем проекте. Я хочу добавить угловой контроллер в пункт Zeppelin. Но это провалилось. Не могли бы вы дать мне несколько советов, как его решить? Ниже мой код.Как использовать угловой контроллер в Zeppelin

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> 
""") 

ответ

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: Я не могу подтвердить, будет ли изменяться сама переменная, будет исправлен исходный код, но я проверил захват области с использованием вышеописанного метода и, похоже, работает. Надеюсь, вам это поможет.