title: Scope injection like in AngularJS for more modern libraries
body: <p>I've got a entire platform written in good old AngularJS and wish to change to a more modern framework with time. But, what keeps worrying me with all this ES6, Webpack and TypeScript sugar is dynamic scope injection. Not sure I'm using the right word, but our use-case is that we've built a AngularJS app which is compiled at deployment. Then in very specific scenarios where customers need something special for a page we can today in AngularJS dynamically inject into a scope which already exists on the page and modify the scope properties. E.g. if we have a button that on click leads to page Y. We can then with JavaScript on their page dynamically inject into the button directive and overwrite scope properties to change the functionality.</p>
  
  <p>Is this possible with either VueJS, React or Angular? With good old JavaScript outside the compiled package to inject into components and change their behavior? It's quite vital for us to do this, so we really don't wan't to make any mistake in choosing a wrong framework moving forward.</p>
  
  <p>Use-case / Example:</p>
  
  <p>Let's say our app implements a directive for a button element. This directive then on click redirects the user. Then outside the the compiled source we then in a very specific scenario want this button to do something else.</p>
  
  <p>E.g.:</p>
  
  <pre><code>/**
   * @ngdoc overview
   * @name el-button
   *
   * @description
   */
  
  angular.module('el-button', [])
  .directive(‘elButton’, function() {
    return {
      restrict: 'E',
      replace: true,
      scope: true,
      template: '&lt;button class="el-button" ng-click="click()"&gt;Button&lt;/button&gt;',
      link: function(scope, element, attrs) {
          scope.click = function () { window.location.href = '/some-url'; }
      }
    };
  });
  angular.module('someapp').requires.push('el-button');
  </code></pre>
  
  <p>We can then outside of the compiled source directly on the page change the behavior to do something else:</p>
  
  <pre><code>/**
   * @ngdoc overview
   * @name custom.el-button
   *
   * @description
   */
  
  angular.module('custom.el-button', [])
  .directive(‘elButton’, function() {
    return {
      restrict: 'C',
      replace: false,
      scope: false,
      link: function(scope, element, attrs) {
          scope.click = function () { alert('click'); }
      }
    };
  });
  angular.module('someapp').requires.push('custom.el-button');
  </code></pre>
  
  <p>In this scenario we change the behavior from redirecting the user to showing an alert.</p>