Object TypeError when referencing variable in tabs.html

ionic-v1
1

Hello,

Currently I am using the tabs module provided by ionic. I currently have a controller attached to my tabs.html file that passes in a variable that I wish to use in my href reference. Though it is functioning, I am running into a console error when using my variable.

Here is the error message:

TypeError: Object #<Comment> has no method 'setAttribute'
    at forEach.attr (angular.js:2463:15)
    at Object.JQLite.(anonymous function) [as attr] (angular.js:2570:9)
    at Object.Attributes.$set (angular.js:5434:28)
    at Object.interpolateFnWatchAction [asn fn] (angular.js:6538:28)
    at Scope.$digest (angular.js:11789:29)
    at Scope.$apply (angular.js:12042:24)
    at done (-angular.js:7824:45)
    at completeRequest (-angular.js:8007:7)
    at XMLHttpRequest.xhr.onreadystatechange (-angular.js:7963:11) angular.

The controller that tabs.html is using:

.controller('TabsCtrl', function($scope, $rootScope, $stateParams) {
    $rootScope.areaIdGlobal = $stateParams.areaId; //makes 'areaIdGlobal' accessible to all controllers
    $scope.areaId = $stateParams.areaId;
})

My tabs.html file:

<view>
    <tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
      <tab title="Area Info" icon="ion-information-circled" href="#/tab/{{areaId}}/info">
        <nav-view name="info-tab"></nav-view>
      </tab>
      <tab title="Boulders" icon="ion-location" href="#/tab/{{areaId}}/boulders">
          <nav-view name="boulders-tab"></nav-view>
      </tab>
   </tabs>
</view>

And, if it helps, here is my StateProvider:

.state('tabs', {
      url: "/tab/:areaId",
      abstract: true,
      templateUrl: "templates/tabs.html",
      controller: 'TabsCtrl'
})
.state('tabs.info', {
  url: "/info",
  views: {
    'info-tab': {
      templateUrl: "templates/info.html",
      controller: 'InfoCtrl'
    }
  }
})

Any ideas as to why I’m getting the error “Object # has no method 'setAttribute” when I call the areaId variable in my tabs.html file?

Thanks!

2

I am having this exact issue, did you ever find a solution to it?

3

I unfortunately haven’t found a solution yet.

4

Ran into the same issue and figured out the problem: in ionic.bundle.js around line 9450, I added a try / catch block:

else if (isDefined(value)) {
try { element.setAttribute(name, value); } catch(e) { }
}

Seems the element variable is a comment node, which does not allow setting attributes. I’m new into the whole thing, but maybe somebody can confirm?!

5

Here’s a “failing” example:

In the “RootCtrl”, I’ve added this : $scope.areaId = '5'. Then, I’ve tried to define the “Home” tab like this:

<ion-tab title="Home" icon-on="icon ion-ios7-filing" icon-off="icon ion-ios7-filing-outline" ng-controller="HomeCtrl" href="#/tab/{{areaId}}/boulders">

The problem is that the ionTab directive only has “text binding” on the href attribute. So, when you pass in an expression, it will fail.

Here is the code from “ionicTabBar”:

        $ionicBind($scope, $attr, {
          animate: '=',
          leftButtons: '=',
          rightButtons: '=',
          onSelect: '&',
          onDeselect: '&',
          title: '@',
          uiSref: '@',
          href: '@', ////// '@' will only bind to text, no expressions allowed
        });

http://umur.io/angularjs-directives-using-isolated-scope-with-attributes/

Basically, you can’t use anything but text here. If you need to use an expression, perhaps you can open an issue on GitHub to allow two way binding.