CODEWITHSUNDEEP
angularjsangularjs-directive
Br Ho
Br Ho

Reputation: 305

Error with AngularJS ng-hide

Apparently i don't fully understand how Angular's ng-show directive interacts with the $scope. I'm trying to hide an element when an array is empty. my html is as follows:

<h1>Tabs</h1>
<ul ng-hide="tabs.length == 0">
    <li ng-repeat="t in tabs">
        <img src="{{t.thumbnailurl}}" />
    </li>
</ul>

tabs is this:

Array
    0: Object
        $$hashKey: "01H"
        created: "2013-08-20 20:15:00"
        thumbnailurl: "https://s3.amazonaws.com/xxxxx"
        __proto__: Object
    1: Object
        $$hashKey: "01J"
        created: "2012-07-09 23:26:49"
        thumbnailurl: "https://s3.amazonaws.com/xxxxx"
        __proto__: Object
    length: 2
    __proto__: Array[0]

When i load my page, ng-hide throws the following exception in the console stating the anonymous function has no method 'trim'. Obviously Angular is puking somewhere in the internals. 

TypeError: Object function () {

// If the string looks like an identifier, then we can return it as is.
// If the string contains no control characters, no quote characters, and no
// backslash characters, then we can simply slap some quotes around it.
// Otherwise we must also replace the offending characters with safe
// sequences.


        if (ix.test(this)) {
            return this;
        }
        if (/[&<"\/\\\x00-\x1f]/.test(this)) {
            return '"' + this.replace(/[&<"\/\\\x00-\x1f]/g, function (a) {
                var c = escapes[a];
                if (c) {
                    return c;
                }
                c = a.charCodeAt();
                return '\\u00' +
                    Math.floor(c / 16).toString(16) +
                    (c % 16).toString(16);
            }) + '"';
        }
        return '"' + this + '"';
    } has no method 'trim'
    at watchFnToHumanReadableString (http://b.gro/campaigns#/tabs/23402:706:30)
    at Object.$delegate.__proto__.$watch (http://b.gro/campaigns#/tabs/23402:735:28)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:13829:9
    at nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:4406:13)
    at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:4015:15)
    at publicLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:3920:30)
    at <error: illegal access>
    at Object.Scope.$broadcast (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:8307:28)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:7463:26
    at wrappedCallback (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:6846:59) <ul ng-hide="tabs.length == 0" class="ng-scope"> angular.js:5754

According to the ng-hide/show docs, this directive should be pretty straight forward and accept truthy/falsy statements that are passed to it. I'm just not sure what i'm doing wrong here....

Upvotes: 1

Views: 817

Answers (1)

Br Ho
Br Ho

Reputation: 305

So, get this. After noticing this was firing correctly in FF, i started disabling extensions in Chromium. Turns out once i disable the angular debugger plugin : https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk, It fires correctly!

Upvotes: 4

Related Questions