Javascript 在AngularJs中显示来自响应的Div

问题--

我在AngularJs中有一个控制器，它执行$http.get，并作为响应获取数据（也有HTML DivID和.Class）。如何从response中获取这个DivID并传递到AngularJs中的视图

我的代码--

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

}());

---

我假设您试图做的是呈现返回的html，而不是在UI中打印html内容

在这种情况下，您可以使用如下指令

var-app=angular.module（'my-app'，['ngSanitize']）；
app.controller（'MyController'，['$scope'，
职能（$范围）{
$scope.myhtml='some content'
}
])

.myclass{
颜色：红色；
}

{{myhtml}}

我假设您要做的是呈现返回的html，而不是在UI中打印html内容

在这种情况下，您可以使用如下指令

var-app=angular.module（'my-app'，['ngSanitize']）；
app.controller（'MyController'，['$scope'，
职能（$范围）{
$scope.myhtml='some content'
}
])

.myclass{
颜色：红色；
}

{{myhtml}}

根据Arun的建议，您需要一个指令。似乎您希望将在别处检索到的HTML传递给视图（与单独获取HTML的指令相反）。我想您可以创建一个从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);
      });
    }
  };
});

app.directive（“find”），函数（$compile）{
var html=“”；
var选择器=”；
//使用jQuery从html和.find中构造一个对象，并使用选择器进行查找
函数呈现（范围、元素）{
如果（html==“”）返回；
var jqHtml=angular.element（“”.html（html）.find（选择器）；
elem.empty（）；
html（jqHtml.html（））；
//$compile，以便导入的HTML中的任何指令/表达式
//已编译并链接到正确的范围
$compile（elem.contents（））（范围）；
}
返回{
限制：“E”，
范围：正确，
链接：功能（范围、要素、属性）{
//$观察属性的变化
属性$observe（'selector'，函数（newValue）{
选择器=新值；
呈现（范围、要素）；
});
属性$observe（'html'，函数（newValue）{
html=newValue；
呈现（范围、要素）；
});
}
};
});

用法是：

<find html="{{html}}" selector="#t1"></find>

---

根据Arun的建议，您需要一个指令。似乎您希望将在别处检索到的HTML传递给视图（与单独获取HTML的指令相反）。我想您可以创建一个从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);
      });
    }
  };
});

app.directive（“find”），函数（$compile）{
var html=“”；
var选择器=”；
//使用jQuery从html和.find中构造一个对象，并使用选择器进行查找
函数呈现（范围、元素）{
如果（html==“”）返回；
var jqHtml=angular.element（“”.html（html）.find（选择器）；
elem.empty（）；
html（jqHtml.html（））；
//$compile，以便导入的HTML中的任何指令/表达式
//已编译并链接到正确的范围
$compile（elem.contents（））（范围）；
}
返回{
限制：“E”，
范围：正确，
链接：功能（范围、要素、属性）{
//$观察属性的变化
属性$observe（'selector'，函数（newValue）{
选择器=新值；
呈现（范围、要素）；
});
属性$observe（'html'，函数（newValue）{
html=newValue；
呈现（范围、要素）；
});
}
};
});

用法是：

<find html="{{html}}" selector="#t1"></find>

您能从更广泛的意义上解释一下您想要实现的目标吗？从另一个URL导入HTML（我想是从同一个来源），提取一个div，然后将其嵌入到视图中，这可能是一种潜在的错误方法。例如，为什么不能使用

？为什么您的服务器不能返回所需的

？您是对的，我正在尝试这样做。这根本不是一个好办法，但我们要求这样做。你还有什么建议吗？最好的方法是让服务器返回json并在客户端生成必要的HTML。除此之外，只返回所需的

。然后你可以按照下面阿伦的答案来做。除此之外，还需要jQuery提取HTML。你们可以使用和我的应用中讨论的类似的方法，就像我们已经拥有的其他应用的包装一样。问题是它不仅仅是一个表单，还有23个表单需要像这样显示，最后一件事，我想做代码复制。关于返回json是一个想法，但被拒绝了。你能从更广泛的意义上解释一下你想要实现什么吗？从另一个URL导入HTML（我想是从同一个来源），提取一个div，然后将其嵌入到视图中，这可能是一种潜在的错误方法。例如，为什么不能使用

？为什么您的服务器不能返回所需的

？您是对的，我正在尝试这样做。这根本不是一个好办法，但我们要求这样做。你还有什么建议吗？最好的方法是让服务器返回json并在客户端生成必要的HTML。除此之外，只返回所需的

。然后你可以按照下面阿伦的答案来做。除此之外，还需要jQuery提取HTML。你们可以使用和我的应用中讨论的类似的方法，就像我们已经拥有的其他应用的包装一样。问题是它不仅仅是一个表单，还有23个表单需要像这样显示，最后一件事，我想做代码复制。关于返回json的想法被拒绝了。OP的问题是从导入的HTML.Ohh中提取一个带有#id的

。。。在这种情况下，将需要一个指令。。。使用

angular（）.find（）

提取元素不是吗？是的，需要使用指令。用一个曲子回答