Cannot bind to rootscope in Angular 1.5 component

Question

I'm in the process of eliminating the "scope soup" architecture of a legacy Angular 1.5 app following this guide: http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html#replace-external-reference-with-bound-input

I'm trying to remove the reference to $rootscope.taskui, so I tried to add a binding to the component. Unfortunately, taskui is now undefined. The "component" is an Angular 1.5 component (which is just a normal directive under the hood). Am I doing something wrong?

If you replace "this.taskui" with "$rootscope.taskui" (correctly injected), method prints the taskui object just fine.

export default {
   bindings: {
     taskui: '='
   },
   controller,
   templateUrl: "component.html"
 };

Here's the controller code:

class Controller {

   constructor() {

      this.method = () => console.log(this.taskui)
   }
}

You should show the HTML code where you use the directive. If you don't pass in a value for `taskui` it will be undefined. — Sunil D., Oct 24 '16 at 21:43
@sunil D --- of course it's defined! I'm refactoring this app so when I call $rootscope.taskui it exists. Please read carefully before downvoting — U Avalos, Oct 24 '16 at 21:43
I didn't down vote :) And my point still stands. You need to pass in a value for `taskui` when you use the directive. I'm not saying `$rootscope.taskui` is undefined ... I'm saying that in your HTML, which you are not showing here, you have to do this: ``. And I'm guessing (been a while) that you can't reference the $rootScope in the HTML so you need to set a local $scope variable equal to that value. — Sunil D., Oct 24 '16 at 21:47
@georgeawg are you even reading? `this.taskui` doesn't work i.e., when you replace rootscope with bindings it stops working. — U Avalos, Oct 24 '16 at 21:59
If you have nested components, you need to bind the variable at every level of nesting. Components use isolate scope which don't prototypically inherit from parent scopes. — georgeawg, Oct 24 '16 at 22:03
@georgeawg thank you that seems like a plausible explanation of what's going on. Will check the hierarchy. — U Avalos, Oct 24 '16 at 22:04
Did you import the necessary files for the taskui. Refer to [this guide](http://blog.grossman.io/angular-1-component-based-architecture-2/). It is just a reference from the guide you are following. The component used as ``. The controller has the goatsList array alright. But in any case for the component to know the goatsList, it needs the controller, and hence the import - `import controller from './goatsList.controller';` Give the component file and relevant details. — Mahesh, Oct 24 '16 at 22:08

score 2 · Accepted Answer · edited May 23 '17 at 10:27

The problem was a misunderstanding of angularjs scope. When using isolated scope, it is not enough to just bind a variable. You must also pass the value as an attribute. See solution #3 here: https://stackoverflow.com/a/17900556/555493

The code (using the original example) should be:

// component
export default {
  bindings: {
    taskui: '='
  },
  controller,
  templateUrl: "component.html"
 };

// parent template
<component taskui="taskui"></component>

Cannot bind to rootscope in Angular 1.5 component

1 Answers1