Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>When multiple controllers need access to the same data, a <a href="https://docs.angularjs.org/guide/services" rel="noreferrer">service</a> should be used. You should not rely on scope inheritance, as it restricts how you can write your HTML. E.g., in the future, you made decide that DerivedController should not be a child of BaseController.</p> <p>Your service should typically provide a public API, and hide the implementation. This makes it easier to refactor the internals.</p> <p>HTML:</p> <pre class="lang-html prettyprint-override"><code>&lt;div ng-controller="BaseController"&gt; &lt;p&gt;Base Controller Value: {{model.getValue()}}&lt;/p&gt; &lt;button ng-click="model.updateValue('Value updated from Base')"&gt;Update In Base&lt;/button&gt; &lt;div ng-controller="DerivedController"&gt; &lt;p&gt;Derived Controller Value: {{model.getValue()}}&lt;/p&gt; &lt;button ng-click="model.updateValue('Value updated from Derived')"&gt;Update In Derived&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>JavaScript:</p> <pre class="lang-js prettyprint-override"><code>app.factory('sharedModel', function () { // private stuff var model = { value: "initial Value" }; // public API return { getValue: function() { return model.value; }, updateValue: function(value) { model.value = value; } }; }); function BaseController($scope, sharedModel) { $scope.model = sharedModel; } function DerivedController($scope, sharedModel) { $scope.model = sharedModel; } </code></pre> <p><a href="http://jsfiddle.net/mrajcok/gY3uZ/" rel="noreferrer">Fiddle</a>.</p> <p>Also, I do not recommend using $rootScope for sharing between controllers.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload