控制器范围跨范围

时间:2014-01-19 21:45:21

标签: javascript angularjs

我有这个html结构

 <div kendo-splitter k-orientation="'horizontal'" k-panes='[{ collapsible: true, size: "15%" }
                                                    , { collapsible: false }
                                                    , { collapsible: true, size: "15%" }]' style="position: absolute; top: 5%; left: 0%; height: 80%; width: 100%">
            <div>Incident</div>
            <div ng-controller="layoutController">
                Video
                <nv-layout id="nv-layout" layout-entries="layoutEntries" on-selected="onSlotSelected" on-resize="onLayoutResized"></nv-layout>
            </div>
            <div>Sensors</div>
        </div>

nv-layout指令定义为

 var directive = {
        link: link,
        restrict: 'EA',
        scope: {
            layoutEntries: "=",
            selected: "&onSelected",
            resized: "&onResized"
        },
        template: "<div></div>"
    };

我想把控制器放在拆分器div中,这样它就可以监听调整大小事件,但是当我这样做时,layoutEntries绑定坏了,我可以添加控制器的位置有限制吗?

1 个答案:

答案 0 :(得分:0)

当您坚持使用自定义指令时,Angular是最简单的。如果您希望我能提供一个例子。

回答你的问题&#34;我可以添加控制器的位置有限制吗?&#34;

是的,它必须高于您希望控制的代码。在您的示例中,您的控制器上方和下方都有Angular代码。但是,您可以嵌套控制器。有点像...

<div ng-controller="MainCtrl">
  <div kendo-splitter k-orientation="'horizontal'" k-panes='[{ collapsible: true, size: "15%" }
                                                , { collapsible: false }
                                                , { collapsible: true, size: "15%" }]' style="position: absolute; top: 5%; left: 0%; height: 80%; width: 100%">
        <div>Incident</div>
        <div ng-controller="layoutController">
            Video
            <nv-layout id="nv-layout" layout-entries="layoutEntries" on-selected="onSlotSelected" on-resize="onLayoutResized"></nv-layout>
        </div>
        <div>Sensors</div>
    </div>
</div>

然后在你的js文件中

app.controller('MainCtrl',function($scope){
  $scope.blah = 'blah'
});

app.controller('layoutController',function($scope){
  $scope.blah = 'blah'
});

另外,您可能需要遵循Angularjs样式指南并在UppderCamelCase中标记控制器。

这是一个链接:

A Style Guide