DEV Community

Discussion on: Storybook Addon AngularJS (1.x)

Collapse
 
titonobre profile image
Tito

Hi Neil.
Do you have an example of what you are trying to achieve?

Collapse
 
hackily profile image
Neil • Edited

I have component examples in a non-storybook ui documentation that I'm trying to see if I can convert over, but a lot of these examples just dump functions into the $scope.

I can't show you the actual code, but this should illustrate what I'm trying to accomplish.

index.html

<div ng-controller="ExampleController">
  <my-ng-element props='innerProps'></my-ng-element>
</div>

script.js

myModule.controller('ExampleController', ['$scope', ...deps,  
  function($scope, ...deps) {
     $scope.clickFn = function() {alert('Click!')};
     $scope.innerProps = [
       //Component relies on controller as syntax
       {key: 'data-ng-click', val: 'ctrl.click()'},
       {key: 'aria-label', val: 'Some label'}
     ]
  }

index.html (rendered)

<div ng-controller="ExampleController">
  <my-ng-element props='innerProps'>
    <div class="has-dynamically-generated-props"
         ng-click="ctrl.clickFn()"
         aria-label="Some label"
    >
    </div>
  </my-ng-element>
</div>

So yeah, with the above, since ctrl is undefined, it just doesn't work. There's no direct controller scope access or support for controller as syntax.

I've found that to minimally change the existing code, I can do something like below, though it would be amazing if there was access to controller scope, or support for controller as syntax officially.

forModule("myApp").createElement(compile => {
  $scope = {};

  //Paste original code here
  $scope.clickFn = function() {alert('Click!')};
  $scope.innerProps = [
    // ctrl hard coded to become _prop0
    {key: 'data-ng-click', val: '_prop0.click()'},
    {key: 'aria-label', val: 'Some label'}
  ]
  //Add in hacky scopeShim workaround
  return compile`<my-ng-element scopeShim="${$scope}" props="${$scope.innerProps}"></my-ng-element>`;
})

There's a lot of examples, I'd like to do as much copy pasting as possible with preferably little to no additional editing of existing code, haha.

Hopefully the above makes sense, I also don't have access to my work codebase at the moment.

Thread Thread
 
titonobre profile image
Tito

My first approach was to expose the $scope.

Can you have a look at the first release here: github.com/titonobre/storybook-add...

And the example here: github.com/titonobre/storybook-add...

If it helps, I can add this back.

Thread Thread
 
titonobre profile image
Tito

@hackily Did you had the chance to try the first version of the addon?