apache-zeppelin - 如何在 Zeppelin 中使用 Angular Controller

Question

我是 Zeppelin 的新手，最近我正在研究如何在我当前的项目中使用 Zeppelin。我想在 Zeppelin 段落中添加一个 Angular Controller 。但它失败了。你能给我一些解决方法的提示吗？下面是我的代码。

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)抓取一个作用域元素来创建一个伪 Controller :

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

您当然可以删除功能 block 并直接在 scope 上操作，而不是在 vm 上操作，但我将其保留下来以尽可能多地遵守您的原始示例可能(我整理了一些您调用 publicVariable 而不是 vm.publicVariable 的变量引用，并将其视为数字而不是初始化为的对象)。

注意:我无法确认变量更改本身是否会修复您的原始代码，但我已经测试过使用上述方法获取范围并且它似乎有效。希望对您有所帮助。