1

Problem Question --

I have a Controller in AngularJs which perform the $http.get and in response it gets the Data(Which also has HTML DivID and .Class). How would I take this DivID from response and pass to the view in AngularJs?

My Code----

Controller.js

  $scope.init = function(){
            console.log("I am working")
                UserService.signIn()
                    .success(function (response) {
                        console.log(response) //this display everything such as divID and .Class
                        //Want this divID and pass it to my view
                    })
                    .error(function (status, data) {

                    })

        };$scope.init();

Services.js

(function() {
    var UserService = function($http) {

        var urlBase = 'http://www.corsproxy.com/myWebsite.com';
        var factory = {};

        factory.signIn = function() {
            return $http.get(urlBase);
        };
        return factory;
    };

    UserService.$inject = ['$http'];

    angular.module('app').factory('UserService',UserService);

}());
GeekOnGadgets
  • 941
  • 3
  • 14
  • 47
  • Can you explain what you're trying to achieve in a broader sense? Importing HTML from another URL (I presume, from same origin), extracting a div, and then embedding it in the view seems like it could be potentially a wrong way to go about. – New Dev Oct 21 '14 at 02:36
  • For example, why can't you use `
    `? Why can't your server return just the needed `
    `?
     – New Dev Oct 21 '14 at 02:37
  • You are right I am trying to do that. This is not a good approach at all but have been asked to do like this. Any other approach you recommend? and URL is from same origin. – GeekOnGadgets Oct 21 '14 at 02:44
  • 1
    The best approach would be to get the server to return json and generate the necessary HTML on the client. Short of that, return just the `
    ` that you need. Then you could just follow the Arun's answer below. Other than that, you'd need to have jQuery extract the HTML. You could use a similar approach as discussed in [my answer to your other question](http://stackoverflow.com/questions/26457799/load-specific-div-in-iframe-from-external-site-in-angularjs/26472997#26472997)
     – New Dev Oct 21 '14 at 02:49
  • my app is acting like an Wrapper for other app we already have. The problem is it is not just one form there are 23 forms to be displayed like this and last thing, I want to do the code duplication. About returning json was the idea but was turned down. – GeekOnGadgets Oct 21 '14 at 03:02

2 Answers2

3

I assume what you are trying to do is to render the returned html instead of printing the html content in the UI.

In that case you can use the ngBindHTML directive like

var app = angular.module('my-app', ['ngSanitize']);

app.controller('MyController', ['$scope',
  function($scope) {
    $scope.myhtml = '<div class="myclass">some content</div>'
  }
])
.myclass {
  color: red;
}
<script src="https://code.angularjs.org/1.2.9/angular.js"></script>
<script src="https://code.angularjs.org/1.2.9/angular-sanitize.js"></script>
<div ng-app="my-app" ng-controller="MyController">
  <div>{{myhtml}}</div>
  <div ng-bind-html="myhtml"></div>
</div>
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
1

As suggested by Arun, you need a directive. It seems that you want to pass the HTML retrieved elsewhere to the view (as opposed to the directive fetching the HTML on its own). I guess you could create a directive that extracts stuff from HTML.

app.directive("find", function($compile){
  var html = "";
  var selector = "";

  // use jQuery to construct an object from html and .find using the selector
  function render(scope, elem){

    if (html === "") return;

    var jqHtml = angular.element("<div>").html(html).find(selector);
    elem.empty();
    elem.html(jqHtml.html());

    // $compile, such that any directives/expressions in the imported HTML 
    //are compiled and linked to the right scope
    $compile(elem.contents())(scope);
  }

  return {
    restrict: "E",
    scope: true,
    link: function(scope, elem, attrs){

      // $observe the attributes for changes
      attrs.$observe('selector', function(newValue){
        selector = newValue;
        render(scope, elem);
      });

      attrs.$observe('html', function(newValue){
        html = newValue;
        render(scope, elem);
      });
    }
  };
});

The usage is:

<find html="{{html}}" selector="#t1"></find>
New Dev
  • 48,427
  • 12
  • 87
  • 129
  • Brilliant mate :) just a question, Now I will create a Controller inside this Directive. Then how I will pass that response to tell that find for div in here. Hope you know what I mean. Thanks – GeekOnGadgets Oct 21 '14 at 10:04
  • I have created GitHub for this.If you have a time please sure do have a look. https://github.com/GeekOnGadgets/StackQuestion Thanks. – GeekOnGadgets Oct 21 '14 at 10:25
  • I don't think you'd want the `UserService.signin` to be part of this directive - have it be part of the page controller as it is in your question. Not sure I fully understood what you mean. – New Dev Oct 21 '14 at 15:22
  • Currently my response is in my controller has all the information(such as DivID,.Class and forms)how would I link it to your Directive, so it knows to look for. Sorry I am very new to angular and jumping into very hard part here. – GeekOnGadgets Oct 21 '14 at 20:56
  • By exposing it via `$scope` in the page controller. For example, in your `.success` do: `$scope.html = response; $scope.$apply();`. – New Dev Oct 21 '14 at 21:08
  • Thanks, but I just read the Angular guides. You should too :) – New Dev Oct 21 '14 at 21:50