EzDevInfo.com

How to access the $scope variable in browser's console using AngularJS?

I would like to access my $scope variable in Chrome's JavaScript console. How do I do that?

I can neither see $scope nor the name of my module myapp in the console as variables.

AngularJS : Prevent error $digest already in progress when calling $scope.$apply()

I'm finding that I need to update the my page to my scope manually more and more since building an application in angular.

The only way I know of to do this is to call $apply() from the scope of my controllers and directives. The problem with this is that it keeps throwing an error to the console that reads :

Error: $digest already in progress

Does anyone know how to avoid this error or achieve the same thing but a different way?

Update parent scope variable

I have two controllers one wrapped within another. Now I know the child scope inherits properties from the parent scope but is there a way to update the parent scope variable? So far I have not come across any obvious solutions.

In my situation I have a calendar controller within a form. I would like to update the start and end dates from the parent scope (which is the form) so that the form has the start and end dates when submitted.

angularjs Access parent scope from child controller

I've set up my controllers using data-ng-controller="xyzController as vm"

I have a scenario with parent / child nested controllers. I have no problem accessing parent properties in the nested html by using $parent.vm.property, but I cannot figure out how to access the parent property from within my child controller.

I've tried injecting $scope and then using $scope.$parent.vm.property, but this isn't working?

Can anyone offer advice?

Scope issues with Angular UI modal

I'm having trouble understanding/using the scopes for an angular UI modal.

While not immediately apparent here, I have the modules and everything set up correctly (as far as I can tell), but these code samples in particular are where I'm finding the bug.

index.html (the important part of it)

<div class="btn-group">
    <button class="btn dropdown-toggle btn-mini" data-toggle="dropdown">
        Actions
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu pull-right text-left">
        <li><a ng-click="addSimpleGroup()">Add Simple</a></li>
        <li><a ng-click="open()">Add Custom</a></li>
        <li class="divider"></li>
        <li><a ng-click="doBulkDelete()">Remove Selected</a></li>
    </ul>
</div>

Controller.js (again, the important part)

MyApp.controller('AppListCtrl', function($scope, $modal){
    $scope.name = 'New Name';
    $scope.groupType = 'New Type';

    $scope.open = function(){
        var modalInstance = $modal.open({
            templateUrl: 'partials/create.html',
            controller: 'AppCreateCtrl'
        });
        modalInstance.result.then(function(response){

            // outputs an object {name: 'Custom Name', groupType: 'Custom Type'}
            // despite the user entering customized values
            console.log('response', response);

            // outputs "New Name", which is fine, makes sense to me.                
            console.log('name', $scope.name);

        });
    };
});

MyApp.controller('AppCreateCtrl', function($scope, $modalInstance){
    $scope.name = 'Custom Name';
    $scope.groupType = 'Custom Type';

    $scope.ok = function(){

        // outputs 'Custom Name' despite user entering "TEST 1"
        console.log('create name', $scope.name);

        // outputs 'Custom Type' despite user entering "TEST 2"
        console.log('create type', $scope.groupType);

        // outputs the $scope for AppCreateCtrl but name and groupType
        // still show as "Custom Name" and "Custom Type"
        // $scope.$id is "007"
        console.log('scope', $scope);

        // outputs what looks like the scope, but in this object the
        // values for name and groupType are "TEST 1" and "TEST 2" as expected.
        // this.$id is set to "009" so this != $scope
        console.log('this', this);

        // based on what modalInstance.result.then() is saying,
        // the values that are in this object are the original $scope ones
        // not the ones the user has just entered in the UI. no data binding?
        $modalInstance.close({
            name: $scope.name,
            groupType: $scope.groupType
        });
    };
});

create.html (in its entirety)

<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">x</button>
    <h3 id="myModalLabel">Add Template Group</h3>
</div>
<div class="modal-body">
    <form>
        <fieldset>
            <label for="name">Group Name:</label>
            <input type="text" name="name" ng-model="name" />           
            <label for="groupType">Group Type:</label>
            <input type="text" name="groupType" ng-model="groupType" />
        </fieldset>
    </form>
</div>
<div class="modal-footer">
    <button class="btn" ng-click="cancel()">Cancel</button>
    <button class="btn btn-primary" ng-click="ok()">Add</button>
</div>

So, my question stands: why is the scope not being double-bound to the UI? and why does this have the customized values, but $scope does not?

I have tried to add ng-controller="AppCreateCtrl" to the body div in create.html, but that threw an error: "Unknown provider: $modalInstanceProvider <- $modalInstance" so no luck there.

At this point, my only option is to pass back an object with this.name and this.groupType instead of using $scope, but that feels wrong.

Thanks in advance! :)

UPDATE: In addition to the reading suggested by Nikos, there is also this list of pitfalls that can help. This problem is an example of pitfall #5.

AngularJS : ng-repeat list is not updated when a model element is spliced from the model array

I have two controllers and share data between them with an app.factory function. The first controller adds a widget in the model array (pluginsDisplayed) when a link is clicked. The widget is pushed into the array and this change is reflected into the view (that uses ng-repeat to show the array content):

<div ng-repeat="pluginD in pluginsDisplayed">
    <div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
</div>

The widget is built upon three directives, k2plugin, remove and resize. Remove directive adds a span to the template of the k2plugin directive. When said span is clicked, the right element into the shared array is deleted with Array.splice(). The shared array is correctly updated, but the change is not reflected in the view. However, when another element is added, after the remove, the view is refreshed correctly and the previously-deleted element is not shown.

What I'm getting wrong? Could you explain me why this doesn't work? Is there a better way to do what I'm trying to do with Angular?

This is my index.html:

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js">
    </script>
    <script src="main.js"></script>
  </head>
  <body>
    <div ng-app="livePlugins">
        <div ng-controller="pluginlistctrl">
            <span>Add one of {{pluginList.length}} plugins</span>
            <li ng-repeat="plugin in pluginList">
                <span><a rel='nofollow' href="" ng-click="add()">{{plugin.name}}</a></span>
            </li>
        </div>
        <div ng-controller="k2ctrl">
            <div ng-repeat="pluginD in pluginsDisplayed">
                <div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
            </div>
        </div>
    </div>
  </body>
</html>

This is my main.js:

var app = angular.module ("livePlugins",[]);

app.factory('Data', function () {
    return {pluginsDisplayed: []};
});

app.controller ("pluginlistctrl", function ($scope, Data) {
    $scope.pluginList = [{name: "plugin1"}, {name:"plugin2"}, {name:"plugin3"}];
    $scope.add = function () {
        console.log ("Called add on", this.plugin.name, this.pluginList);
        var newPlugin = {};
        newPlugin.id = this.plugin.name + '_'  + (new Date()).getTime();
        newPlugin.name = this.plugin.name;
        Data.pluginsDisplayed.push (newPlugin);
    }
})

app.controller ("k2ctrl", function ($scope, Data) {
    $scope.pluginsDisplayed = Data.pluginsDisplayed;

    $scope.remove = function (element) {
        console.log ("Called remove on ", this.pluginid, element);

        var len = $scope.pluginsDisplayed.length;
        var index = -1;

        // find the element in the array
        for (var i = 0; i < len; i += 1) {
            if ($scope.pluginsDisplayed[i].id === this.pluginid) {
                index = i;
                break;
            }
        }

        // remove the element
        if (index !== -1) {
            console.log ("removing the element from the array, index: ", index);
            $scope.pluginsDisplayed.splice(index,1);
        }

    }
    $scope.resize = function () {
        console.log ("Called resize on ", this.pluginid);
    }
})

app.directive("k2plugin", function () {
    return {
        restrict: "A",
        scope: true,
        link: function (scope, elements, attrs) {
            console.log ("creating plugin");

            // this won't work immediatley. attribute pluginname will be undefined
            // as soon as this is called.
            scope.pluginname = "Loading...";
            scope.pluginid = attrs.pluginid;

            // observe changes to interpolated attribute
            attrs.$observe('pluginname', function(value) {
                console.log('pluginname has changed value to ' + value);
                scope.pluginname = attrs.pluginname;
            });

            // observe changes to interpolated attribute
            attrs.$observe('pluginid', function(value) {
                console.log('pluginid has changed value to ' + value);
                scope.pluginid = attrs.pluginid;
            });
        },
        template: "<div>{{pluginname}} <span resize>_</span> <span remove>X</span>" +
                       "<div>Plugin DIV</div>" + 
                  "</div>",
        replace: true
    };
});

app.directive("remove", function () {
    return function (scope, element, attrs) {
        element.bind ("mousedown", function () {
            scope.remove(element);
        })
    };

});

app.directive("resize", function () {
    return function (scope, element, attrs) {
        element.bind ("mousedown", function () {
            scope.resize(element);
        })
    };

});

AngularJS : Call a Controller Function from a directive without isolated scope

I cannot seem to find a way to call a function on the parent scope from within a directive without using isolated scope. I know that if I use isolated scope I can just use "&" in the isolated to access the function on the parent scope, but using isolated scope when it isn't necessary has consequences. Consider the following html:

<button ng-hide="hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button>

In simple this example, I want to show a javascript confirm dialog and only call doIt() if they click "ok" in the confirm dialog. This is simple using an isolated scope. The directive would look like this:

.directive('confirm', function () {
    return {
        restrict: 'A',
        scope: {
            confirm: '@',
            confirmAction: '&'
        },
        link: function (scope, element, attrs) {
            element.bind('click', function (e) {
                if (confirm(scope.confirm)) {
                    scope.confirmAction();
                }
            });
        }
    };
})

But the problem is, because I'm using isolated scope, ng-hide in the example above no longer executes against the parent scope, but rather in the isolated scope (since using an isolated scope on any directive causes all directives on that element to use the isolated scope). Here is a jsFiddle of the above example where ng-hide is not working. (Note that in this fiddle, the button should hide when you type "yes" in the input box).

The alternative would be to NOT use an isolated scope, which actually is what I really want here since there is no need for this directive's scope to be isolated. The only problem I have is, how do I call a method on the parent scope if I don't pass it in on on isolated scope? Here is a jsfiddle where I am NOT using isolated scope and the ng-hide is working fine, but, of course, the call to confirmAction() doesn't work and I don't know how to make it work.

Please note, the answer I am really looking for is how to call functions on the outer scope WITHOUT using an isolated scope. And I am not interested in making this confirm dialog work in another way, because the point of this question is to figure out how to make calls to the outer scope and still be able to have other directives work against the parent scope.

Alternatively, I would be interested to hear of solutions that use an isolated scope if other directives will still work against the parent scope, but I don't think this is possible.

AngularJS : Directive isolate scope with ng-repeat scope

I have a directive with an isolate-scope (so that I can reuse the directive in other places), and when I use this directive with an ng-repeat, it fails to work.

I have read all the documentation and stackoverflow answers on this topic and understand the issues. I believe I have avoided all the usual gotchas.

So I understand that my code fails because of the scope created by the ng-repeat directive. My own directive creates an isolate-scope and does a two-way data-binding to an object in the parent scope. My directive will assign a new object-value to this bound variable and this works perfectly when my directive is used without ng-repeat (the parent variable is updated correctly). However, with ng-repeat, the assignment creates a new variable in the ng-repeat scope and the parent variable does not see the change. All this is as expected based on what I have read.

I have also read that when there are multiple directives on a given element, only one scope is created. And that a priority can be set in each directive to define the order in which the directives are applied; the directives are sorted by priority and then their compile functions are called (Search for the word priority at http://docs.angularjs.org/guide/directive).

So I was hoping I could use priority to make sure that my directive runs first and ends up creating an isolate-scope, and when ng-repeat runs, it re-uses the isolate-scope instead of creating a scope that prototypically inherits from the parent scope. The ng-repeat documentation states that that directive runs at priority level 1000. It is not clear whether 1 is a higher priority level or a lower priority level. When I used priority level 1 in my directive, it did not make a difference, so I tried 2000. But that makes things worse: my two-way bindings become undefined and my directive does not display anything.

I have created a fiddle to show my issue. I have commented out the priority setting in my directive. I have a list of name objects and a directive called name-row that shows the first and last name fields in the name object. When a displayed name is clicked, I want it to set a selected variable in the main scope. The array of names, the selected variable are passed to the name-row directive using two-way data-binding.

I know how to get this to work by calling functions in the main scope. I also know that if selected is inside another object, and I bind to the outer object, things would work. But I am not interested in those solutions at the moment.

Instead, the questions I have are:

• How do I prevent ng-repeat from creating a scope that prototypically inherits from the parent scope, and instead have it use my directive's isolate-scope?
• Why is priority level 2000 in my directive not working?
• Using Batarang, is it possible to know what type of scope is in use?

Confirmation dialog on ng-click - AngularJS

I am trying to setup a confirmation dialog on an ng-click using a custom angular js directive:

app.directive('ngConfirmClick', [
    function(){
        return {
            priority: 1,
            terminal: true,
            link: function (scope, element, attr) {
                var msg = attr.ngConfirmClick || "Are you sure?";
                var clickAction = attr.ngClick;
                element.bind('click',function (event) {
                    if ( window.confirm(msg) ) {
                        scope.$eval(clickAction)
                    }
                });
            }
        };
}])

This works great but unfortunately, expressions inside the tag using my directive are not evaluated:

<button ng-click="sayHi()" ng-confirm-click="Would you like to say hi?">Say hi to {{ name }}</button>

(name is not evaluated is this case). It seems to be due to the terminal parameter of my directive. Do you have any ideas of workaround?

To test my code: http://plnkr.co/edit/EHmRpfwsgSfEFVMgRLgj?p=preview

Can an angular directive pass arguments to functions in expressions specified in the directive's attributes?

I have a form directive that uses a specified callback attribute with an isolate scope:

scope: { callback: '&' }

It sits inside an ng-repeat so the expression I pass in includes the id of the object as an argument to the callback function:

<directive ng-repeat = "item in stuff" callback = "callback(item.id)"/>

When I've finished with the directive, it calls $scope.callback() from its controller function. For most cases this is fine, and it's all I want to do, but sometimes I'd like to add another argument from inside the directive itself.

Is there an angular expression that would allow this: $scope.callback(arg2), resulting in callback being called with arguments = [item.id, arg2]?

If not, what is the neatest way to do this?

I've found that this works:

<directive 
  ng-repeat = "item in stuff" 
  callback = "callback" 
  callback-arg="item.id"/>

With

scope { callback: '=', callbackArg: '=' }

and the directive calling

$scope.callback.apply(null, [$scope.callbackArg].concat([arg2, arg3]) );

But I don't think it's particularly neat and it involves puting extra stuff in the isolate scope.

Is there a better way?

Plunker playground here (have the console open).

Controller not a function, got undefined, while defining controllers globally

I am writing a sample application using angularjs. i got an error mentioned below on chrome browser.

Error is

Error: [ng:areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined

Code

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="../angular.min.js"> </script>
    <script type="text/javascript">
        function ContactController($scope) {
            $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

            $scope.add = function() {
                $scope.contacts.push($scope.newcontact);
                $scope.newcontact = "";

            };
        }

    </script>

</head>

<body>

    <h1>  modules sample </h1>

    <div ng-controller="ContactController">
        Email:<input type="text" ng-model="newcontact">
        <button ng-click="add()">Add</button>

        <h2> Contacts </h2>
        <ul>
            <li ng-repeat="contact in contacts"> {{contact}} </li>
        </ul>

    </div>
</body> 
</html>

AngularJS access scope from outside js function

I'm trying to see if there's a simple way to access the internal scope of a controller through an external javascript function (completely irrelevant to the target controller)

I've seen on a couple of other questions here that

angular.element("#scope").scope();

would retrieve the scope from a DOM element, but my attempts are currently yielding no proper results.

Here's the jsfiddle: http://jsfiddle.net/sXkjc/5/

I'm currently going through a transition from plain JS to Angular. The main reason I'm trying to achieve this is to keep my original library code intact as much as possible; saving the need for me to add each function to the controller.

Any ideas on how I could go about achieving this? Comments on the above fiddle are also welcome.

Angularjs: 'controller as syntax' and $watch

How to subscribe on property change when using "controller as syntax"?

controller('TestCtrl', function ($scope) {
        this.name = 'Max';
        this.changeName = function () {
            this.name = new Date();
       }
       // not working       
       $scope.$watch("name",function(value){
            console.log(value)
       });
});


<div ng-controller="TestCtrl as test">
        <input type="text" ng-model="test.name" />
        <a ng-click="test.changeName()" rel='nofollow' href="#">Change Name</a>
</div>  

Sending event when angular.js finished loading

wondered what's the best way to detect the finish of page loading/bootstrapping, when all directives done compiling/linking

any event already there? should i overload the bootstrap function?

thanks for any ideas Lior

Passing current scope to an AngularJS Service

Is it correct to pass the "current" $scope to an AngularJS service?

I'm in the situation where I've a $service knowing it's consumed by only one controller, and I'd like to have a reference to the controller's scope in the $service methods themselves.

Is it philosophically correct?

Or I'd better to broadcast events to the $rootScope and then make my controller listen to them?