Angular JS Shared functions between controllers

Question

I have this code: http://jsbin.com/gazajunacu/1/edit?html,js,output

       angular.module('app', [])
        .service('greeting', function Greeting() {
          var greeting = this;
          greeting.message = '<strong>Default 2</strong>';
        })
        .controller('FirstCtrl', function ($sce, greeting) {
          var first = this;

          first.greeting = $sce.trustAsHtml(greeting);  
        })
        .controller('SecondCtrl', function (greeting) {
          var second = this;

          second.greeting = greeting;  
        })

And I cannot get it to spit html for first controller. I cannot get it working. Please check what's missing from the scripts.

Thanks.

Please include the code here in your question as well. Also any elaboration on how it doesn't work would be good. — ryanyuyu, Apr 08 '15 at 14:43
don't put blobs of code in comments, update the question itself so you can format the code — charlietfl, Apr 08 '15 at 14:46
Read the error message. Fix the error. you will find that the error has nothing to do with your shared function. — Kevin B, Apr 08 '15 at 14:48
and one step better is use non minified version of angular for more verbose error output — charlietfl, Apr 08 '15 at 14:50
your main problem is trying to use an object as a string, try using `greeting.message` — charlietfl, Apr 08 '15 at 14:51
One other thing that won't directly solve your problem but that you should know : In angular, a controller should almost never output html. If you have to alter the html, it should normally be done in a directive. — Galdo, Apr 08 '15 at 15:09

score 2 · Accepted Answer · answered Apr 08 '15 at 15:22

The problem is that you didn't include angular-sanitize.js in your libraries.

The correct way to achieve that is this : http://jsbin.com/rowukowuba/1/edit

Include angular-sanitize.js in the page and use ng-bind-html directive in the html page.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular-sanitize.js"></script>

<div>
  <span ng-bind-html="greeting"> </span> World
</div>
<div ng-controller="SecondCtrl as second">
  <span ng-bind-html="greeting.message"> </span> in Second
</div>
</body>

In the javascript, just place the html code in the scope and make sure that you include ngSanitize (i adapted your code) :

angular.module('app', ['ngSanitize'])
  .service('greeting', function Greeting() {
    var greeting = this;
    greeting.message = '<strong>Default 2</strong>';
  })
  .controller('FirstCtrl', function ($scope, greeting) {
  $scope.greeting = '<strong>Default 2</strong>';
  })
  .controller('SecondCtrl', function ($scope, greeting) {

    $scope.greeting = greeting;  
  });

score 1 · Answer 2 · answered Apr 08 '15 at 14:55

1

This should help

angular.module('app', [])
.service('greeting', function Greeting() {
    var greeting = this;
    greeting.message = '<strong>Default 2</strong>';
})
.controller('FirstCtrl', function (greeting) {
    var me = this;
    me.greeting = greeting;  
})
.controller('SecondCtrl', function ($scope,greeting) {

    var me = this;
    me.greeting = greeting;  
})

;

The following row created your error

first.greeting = $sce.trustAsHtml(greeting);

answered Apr 08 '15 at 14:55

Chris Noring

471
3
9

I want to display html contents so the code is correct trustAsHtml. – uiuxhub Apr 08 '15 at 14:57
in your view you refer to greeting like it was on the scope. when you write {{ greeting.message }} is the same as in the controller talk to a property called greeting so basically $scope.greeting.message – Chris Noring Apr 08 '15 at 14:57

Angular JS Shared functions between controllers

2 Answers2