toddmotto / angular-component Goto Github PK

Hey all watching this repo, I've taken some time to polyfill one-way bindings using '<' values in the scope: {} Object, as well as implemented the $onChanges lifecycle hook as a polyfill.

If anyone is around to try it out then that'd be awesome. Commit here: b737e27

And a live jsfiddle link here: https://jsfiddle.net/toddmotto/umudwa9u/

From the docs:

Called whenever one-way (<) or interpolation (@) bindings are updated. The

• changesObj is a hash whose keys are the names of the bound properties that have changed, and the values are an
• object of the form { currentValue, previousValue, isFirstChange() }. Use this hook to trigger updates within a
• component such as cloning the bound value to prevent accidental mutation of the outer value.

As per my GitHub comment in this angular.js issue, I'm running into issues with template functions with annotating or ng-strict-di.

I know this issue may belong in the main angular.js repo, but I just wanted to ask, in case someone here had an idea how to get around this.

Hi. Great library. Now that the API is finally stable and your backport has been battle tested, we are going to start using it at my Fortune 50 company.

Only thing is that your bower.json is reporting the wrong version. Perhaps you could add a note to your build process to keep this version aligned to the tag.

Thanks a lot.

Hello -

I'm trying to use this angular-component.js with angular 1.4.14 for this component: https://github.com/pablojim/highcharts-ng

Its scope is two one-way bound variables. If you see the code below, when run, the variable config is just not defined in the controller when it goes to add the method getChartObj. In addition, the modifiedBindings variable in this case in your code works out to be {}. It works if I change the binding for the two variables to =.

Any ideas?

  angular.module('highcharts-ng', [])
    .component('highchart', {
        bindings: {
            config: '=',
            changeDetection: '='
            //config: '<',
            //changeDetection: '<'
          },
          controller: HighChartNGController
    });

  HighChartNGController.$inject = ['$element', '$timeout'];

  function HighChartNGController($element, $timeout) {
    var seriesId = 0;
    var ctrl = this;
    var prevConfig = {};
    var mergedConfig = {};
    var detector = ctrl.changeDetection || angular.equals;
    this.$onInit = function() {
      ctrl.config.getChartObj = function(){

Technically they are the features of directives and not components, but it would require too much fragile patching in versions prior to 1.5.

Directives can live fine without them, but they are essential for intercomponent communication, components have no alternatives to link and thus are barely usable without them.

Can we add them, please?

See here: https://github.com/angular/angular.js/blob/master/test/ng/compileSpec.js#L3898-L3935

Hi, I had problems with both polyfills if I want to use the injectable resolve properties into the component controller. Some help please.

    .state({
      name:      'referrals.received',
      url:       'received/',
      component: 'referralsReceived',
      resolve: {
        data: function() {
          return 'some data'
        }
      },
    })

...

.component('referralsReceived', {
  bindings: {
    data: '<',
  },
  controller: controller,
  templateUrl: 'src/referrals/received/received.html',
});

...

function controller() {
  console.log('data', this.data); // is undefined
}

ui-router-route-to-components: 0.1.0
angular-component.js: 0.1.3
angular: 1.3.15

Question

Make sense we work to upgrade some ng2 features to this project ?

Features:

• Component Style (css)
• Component Router

Why?

Actually, some people cannot update to ng2 yet (Legacy code, product roadmap and stuff). I think this isn't so complicated.

Any idea why Batarang would break this polyfill?

When I have Batarang chrome extension enabled, if I try to load this polyfill into any angular 1.3 or 1.4 versions, ng fails to bootstrap and throws the error below.
Problem goes away and .component works great as soon as I disable the batarang extension (... found I later day one...)

angular.js:4087
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=app&p1=TypeError%3A…nsion%3A%2F%2Fighdmehidhipcmcojjgiloacoafjmpfk%2Fdist%2Fhint.js%3A569%3A11)
    at https://code.angularjs.org/1.3.0/angular.min.js:6:416
    at https://code.angularjs.org/1.3.0/angular.min.js:35:459
    at r (https://code.angularjs.org/1.3.0/angular.min.js:7:302)
    at g (https://code.angularjs.org/1.3.0/angular.min.js:35:33)
    at Jb (https://code.angularjs.org/1.3.0/angular.min.js:38:269)
    at d (https://code.angularjs.org/1.3.0/angular.min.js:18:3)
    at Object.ta.resumeBootstrap (https://code.angularjs.org/1.3.0/angular.min.js:18:407)
    at maybeBootstrap (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:569:11)

I know batarang extension was and is buggy, but it never broke my app like this before, and it's a useful tool in my belt at times..

sample code I'm using:

Is it possible to use dynamic controller binding like in directives?

Directive example

angular.module('myApp',[]).

directive('addIcons', function(){
return {
    restrict : 'A',
    scope:{},
    controller : "@",
    name:"controllerName",    
    template:'<input type="button" value="(+) plus" ng-click="add()">'
  }
}).
controller("IconsOneCtrl",function($scope){
     $scope.add = function(){
        alert("IconsOne add ");
      }
}).
controller("IconsTwoCtrl",function($scope){
     $scope.add = function(){
        alert("IconsTwo add ");
      }
});

https://docs.angularjs.org/api/ng/service/$compile

Hi

I saw that you remove bindings options 2 days ago.

So now how we can pass ui-router resolve injection on the component?

I use ui-router and component combined like that:

.state('test, {
    url: '/',
    template: '<my-component/>',
    resolve: {
        testData: function(service) {
              return service.promise();
        }
    }
}

before i used:

.state('test, {
    url: '/',
    template: '<my-component data="test.data"/>',
   controllerAs: 'test',
   controller: function(testData) {
      this.data = testData;
   }
    resolve: {
        testData: function(service) {
              return service.promise();
        }
    }
}

What is the best practice now to have the same behaviour, that is the controller is instanciate after the promise is resolved?

Hi @toddmotto. I'm using your patch and I noticed that when I omit the bindings property of the component below, it doesn't get an isolate scope, while using angular.js-1.5.0-rc.0 it does. See:

ps: should've cropped the images srry

I am having some issues with multiple one way bindings and the $onChange.
It appears that the last one way bind variable is the only one that detects changes.

Here is a JS Fiddle https://jsfiddle.net/9jkr44mx/
(I forked it from the one way binding fiddle you had here https://jsfiddle.net/toddmotto/umudwa9u/.)

All changes to count and other are being treated as other on the component and not individually.
After the timeout, count should be updated to 100 and other should still be 0, but other gets updated to 100 and count is not present on the controller/component scope.

@toddmotto I am having this problem trying to use resolved objects from ui-router inside component, but these object are undefined when trying to access from components.

In angular 1.5 with ui router, we can place resolved data like this:

<my-component data="$resolve.MyData".....
and resolve object looks something like this:

 resolve: {
                        MyData: ['myservice', function (myservice) {
                            return myservice.getDataAsync()
                        }],       

We have been working with angular 1.5, but now have to roll back to 1.3 for some issues and for components we are using your polyfill. Good job 👍

After adding polyfill, I have tried both approaches:

1. bindings

 bindings: {
                data: '<MyData' // Doesn't work
                 //data: '<' // This doesn't work either
            }

2. Injecting into controller of component:

MyController.$inject = ['data'];
function MyController(data) {

But data object received from route resolve is always undefined.

It will be really helpful if an example with router can be created. Thanks

Hello,
I use v0.1.0; and angular 1.5;
I have problems. When I try to run my app I got this error:
Error: [$injector:unpr] Unknown provider: componentFactoryNamingConventions
for v0.0.1 everything is ok.

First thanks for putting this together.

One issue, should the controllerAs property setting reference name in the last OR clause? Instead of '$ctrl'.

angular-component/src/angular-component.js:149

I think this call to self.$postLink should include standard link function args as described in angular docs here.

when using the following syntax for one way data binding

binding: {
  property: "<"
}

the following error is thrown

Error: [$compile:iscp] Invalid isolate scope definition for directive 'componentName'. Definition: {... property: '<' ...}

Working with new project collaborator @rynclark to implement these.

I am trying to write some unit tests for the components created using this polyfill. Just need some hint to understand how we would be able to achive that?

With angular 1.5 we have $componentController api to instantiate components, What is alternative here?

Since Bower is no longer being maintained I think it would make more sense to host this library on NPM or at least host it on both.

Please update the release also in npm: https://www.npmjs.com/package/angular-component

Related to #1

The latest commit makes it impossible to set any isolate scope properties, as it is not extendable anymore.

When I have scope:true in a directive that is nested inside a component template, I am able to access the component variables in the directive via the $ctrl object of scope (i.e. $scope.$parent.$ctrl)...this $ctrl object is inherited by the scope of the directive.

The issue is, when I change the $ctrl object on the "child" scope (i.e. directive scope), it is still changing on the parent $ctrl object ($scope.$parent.$ctrl) and I need them to be dissociated from one another...is this possible?

Thanks in advance.

A simple <div ng-show="false">Hello</div> doesn't work for me. Upgrading to Angular 1.5 fixes the issue, which means angular-component is to blame here.