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);

}());
Improve this question
5
  • 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. Commented Oct 21, 2014 at 2:36
  • For example, why can't you use <div ng-include="'website.com'">? Why can't your server return just the needed <div>? Commented Oct 21, 2014 at 2: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. Commented Oct 21, 2014 at 2: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 <div> 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 Commented Oct 21, 2014 at 2: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. Commented Oct 21, 2014 at 3:02

2 Answers 2

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

The OP's question was to extract a <div> with #id from the imported HTML.
Ohh... in that case a directive will be needed... to extract the element using angular().find() isn't it
yes you are right need to use directive. Answered in one of the question by @NewDev.
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>
Improve this answer

6 Comments

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
I have created GitHub for this.If you have a time please sure do have a look. github.com/GeekOnGadgets/StackQuestion Thanks.
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.
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.
By exposing it via $scope in the page controller. For example, in your .success do: $scope.html = response; $scope.$apply();.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.