5

コントローラーを定義しましたが、スコープにいくつかの変数があります。コントローラーのすぐ外（ではなくng-model）のスコープの変数に値を割り当てる方法があるかどうかを知ることができますか？<script>また、 （を使用する代わりに）Webページの要素のどこかでコントローラーの関数を直接呼び出すことはできますng-clickか？

ありがとう！

乾杯、クリス

4

1 に答える 1

11

角度でのコントローラー定義は、実際にはクラスであり、オブジェクトではありません。コントローラーが参照される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
    };
});

これにより、タブが変更されたときにイベントがディスパッチされます。

于 2012-06-11T09:17:29.290 に答える