title: angularjs directive use parameter inside link function
body: <p>This is probably a stupid question, but I have been stuck on it for days and neither of the googled solutions panned out for me.</p>
  
  <p>I'm writing an angular 1.4 app following a directive driven approach, so for any entity I have one or more widgets:</p>
  
  <ul>
  <li>isolated scope </li>
  <li>controller as </li>
  <li>bindToController true</li>
  </ul>
  
  <p>The problem is of the "user has stuff" variety.</p>
  
  <pre><code>&lt;user-widget&gt;
     &lt;stuff-widget userid="user._id"&gt;&lt;/stuff-widget&gt;
  &lt;/user-widget&gt;
  </code></pre>
  
  <p>The userid passes nicely into the widget, but I would like to use it inside the stuff widget's link function, because stuff is really complicated and in the real world I need to grab various other parts as well.</p>
  
  <p>I tried various methods to get to the userid value (as suggested in various other stackoverflow discussions and elsewhere on the web)</p>
  
  <ul>
  <li>use bidrectional binding -> not effective</li>
  <li>tried via scope and controller -> userid, uid not defined</li>
  <li>require ^userWidget -> lost access to my controller</li>
  <li>use attrs.$observe('userid', ....) -> js error: userid not defined</li>
  <li>passed it via pre link of the parent -> did work, but not a good idea/limited merits</li>
  </ul>
  
  <p>I have a plunker with the various things I tried: <a href="http://plnkr.co/edit/SqlhYSteCDxMaAVZWCsy?p=info" rel="nofollow">http://plnkr.co/edit/SqlhYSteCDxMaAVZWCsy?p=info</a></p>
  
  <p>The widgets look like this (working pre link variant)</p>
  
  <pre><code>  function userWidget() {
      return {
        restrict: 'EA',
        scope:{},
        template: '&lt;h2&gt;User&lt;/h2&gt; {{user.name}}&lt;stuff-widget userid="user._id"&gt;&lt;/stuff-widget&gt;',
        replace: false,
        controllerAs: 'userCtrl',
        bindToController: true,
        controller: 'UserCtrl',
        link: { // this actually works, not sure wether this a good idea
          pre: function preLink(scope, element, attrs, ctrl) {
            var uid = 1;
            scope.user = ctrl.findById(uid);
            scope.userid = scope.user._id;
      },
      post: function postLink(scope, element, attrs, ctrl) {}
        }
  
      };
    }
  
    function stuffWidget() {
      return {
        restrict: 'EA',
        scope: {
          uid: '=userid'
        }, 
        template: '&lt;h3&gt;User stuff&lt;/h3&gt;stuffCtrl.userid inside widget: {{stuffCtrl.userid}}&lt;div ng-repeat="stuff in stuffCtrl.userStuff"&gt;\
  User id: {{stuff.userid}}: {{stuff.stuff}}\
  &lt;/div&gt;',
        replace: false,
        controller: 'StuffCtrl',
        controllerAs: 'stuffCtrl',
        bindToController: {
          userid: '='
        },
        link: function (scope, element, attrs, ctrl) {
      console.log('stuff ctrl userid:', ctrl.userid); // not defined
      console.log('stuff scope uid:', scope.uid); // not defined
      console.log('Scope parent userid: ',scope.$parent.userid); // undefined
  
      // didn't work either - userid not defined
      /* attrs.$observe('userid', function(value) {
        if (value) {
          ctrl.userid = userid;
          console.log('stuff ctrl userid observed:', ctrl.userid);
        }
      }); */
      ctrl.userStuff = ctrl.findByUserId(ctrl.userid);
        }
      };
    } 
  </code></pre>
  
  <p>I'm an angular beginner (first serious project) and so far my experience has been: "if it's hard to figure out, you are probably doing it the wrong way".</p>
  
  <p>So,</p>
  
  <ul>
  <li>Did I miss an obvious way to access the param inside the link function?</li>
  <li>Did I screw up the ways I tried (especially $observe) because I incorrectly transferred them to my setting?</li>
  <li>Should I just stick the controller calls inside the template and be done with it?</li>
  <li>Should I go about it in an entirely different way? compile function? controller function? whatever other angular depths I'm not yet familiar with?</li>
  </ul>