有没有办法直接在Angularjs中与控制器和范围交互?

时间:2012-06-11 00:51:00

标签: javascript angularjs

我已经定义了一个控制器,并且范围中有一些变量。我是否知道是否有办法直接在控制器外部(而不是ng-model)为范围变量赋值?另外,我可以直接在网页的<script>元素中的某个位置调用控制器的功能(而不是使用ng-click)吗?

谢谢!

干杯, 克里斯

1 个答案:

答案 0 :(得分:11)

angular中的控制器定义实际上是Class而不是Object。引用控制器的HTML中的每个位置,在编译阶段,angular使用定义的控制器类创建一个新的控制器对象。因此,您可以使用相同的控制器类来引用多个范围。

始终存在与控制器关联的范围,并且所有变量都绑定到该范围。您可以通过调用类似

的内容来访问特定html元素的范围
var scope = angular.element("#myelement").scope();
//use the scope....

如果您让我们知道您为什么要尝试从控制器外部访问示波器,这也会很好。

<强>更新

这是引导标签组件...您可以将其用作

<tab>
<pane title="tab1"><pane>
<pane title="tab2"></pane>
</tabs>

这与http://angularjs.org/主页面上存在的相同。我刚刚更新它以在标签更改时广播事件。

var directives = angular.module('myApp.directives', []);
directives.directive('tabs', function () {
    return {
        restrict:'E',
        transclude:true,
        scope:{},
        controller:function ($scope, $element, $rootScope) {
            var panes = $scope.panes = [];

            $scope.select = function (pane) {
                angular.forEach(panes, function (pane) {
                    pane.selected = false;
                });
                pane.selected = true;
                $rootScope.$broadcast("tabChanged", pane.title);
            }

            this.addPane = function (pane) {
                if (panes.length == 0) $scope.select(pane);
                panes.push(pane);
            }
        },
        template:'<div class="tabbable">' +
            '<ul class="nav nav-tabs">' +
            '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">' +
            '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
            '</li>' +
            '</ul>' +
            '<div class="tab-content" ng-transclude></div>' +
            '</div>',
        replace:true
    };
});
directives.directive('pane', function () {
    return {
        require:'^tabs',
        restrict:'E',
        transclude:true,
        scope:{ title:'bind' },
        link:function (scope, element, attrs, tabsCtrl) {
            tabsCtrl.addPane(scope);
        },
        template:'<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
            '</div>',
        replace:true
    };
});

当标签发生变化时,会调度一个事件。