Is there a way to interact with controller and scope directly in Angularjs?

Question

I have defined a controller and there are some variables in the scope. May I know if there is way for me to assign a value to a variable of scope directly outside the controller (not by ng-model)? Also, can I call the function of controller directly somewhere in the <script> element of the web page (instead of using ng-click)?

Thanks!

Cheers, Chris

Answer 1

A controller definition in angular is actually a Class and not an Object. Each place in the HTML that controller is referenced, during the compilation phase, angular creates a new controller object using the defined controller class. So, you could refer to more than one scope with the same controller class.

There is always a scope associated with a controller and all the variables are bound to that scope. You could access the scope of a particular html element by calling something like

var scope = angular.element("#myelement").scope();
//use the scope....

It would also be good if you let us know why you are trying to access the scope from outside the controller.

UPDATE

This is the bootstrap tab component ... You can use this as

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

This is the same one that exists at http://angularjs.org/ main page.. I have just updated it to broadcast events when a tab changes.

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
    };
});

This dispatches an event when the tab changes..