从AngularJs响应显示事业部 [英] Display Div from response in AngularJs

问题描述

问题的问题 -

我在AngularJs一个控制器，执行$ http.get和响应它获得的数据（也有HTML DIVID和。类）。我怎么会借此DIVID从响应，并传递给在AngularJs的看法？

我的code ----

Controller.js

  $ scope.init =功能（）{
            的console.log（我的工作）
                UserService.signIn（）
                    .success（功能（响应）{
                        的console.log（响应）//这一切都显示，如DIVID和。类
                        //要这个DIVID并传递给我的看法
                    }）
                    .error（功能（状态，数据）{                    }）        }; $ scope.init（）;
 

Services.js

 （函数（）{
    VAR UserService =功能（$ HTTP）{        VAR urlBase ='http://www.corsproxy.com/myWebsite.com';
        变种工厂= {};        factory.signIn =功能（）{
            返回$ http.get（urlBase）;
        };
        回厂;
    };    。UserService $注射='$ HTTP'];    angular.module（应用）工厂（'UserService'，UserService）。}（））;
 

解决方案

作为建议的阿伦，你需要一个指令。看来你想传递别处检索到视图中的HTML（而不是指令获取自身的HTML）。我想你可以创建一个从HTML中提取的东西指令。

  app.directive（查找，函数（$编译）{
  变种的html =;
  变种选择=;  //使用jQuery构建从HTML对象并.find使用选择
  功能渲染（范围，ELEM）{    如果（HTML ===）的回报;    VAR jqHtml = angular.element（＆LT; D​​IV＆gt;中）HTML（HTML）.find（选择）。
    elem.empty（）;
    elem.html（jqHtml.html（））;    // $编译，这样在导入的HTML任何指示/ EX pressions
    //被编译并链接到合适的范围
    $编译（elem.contents（））（范围）;
  }  返回{
    限制：E，
    适用范围：真，
    链接：功能（范围，ELEM，ATTRS）{      // $观察更改的属性
      ATTRS。观察$（'选择'，函数（newValue）以{
        选择=为newValue;
        渲染（范围，ELEM）;
      }）;      ATTRS。$观察（HTML，功能（newValue）以{
        HTML =为newValue;
        渲染（范围，ELEM）;
      }）;
    }
  };
}）;
 

的用法是：

 ＆LT;找到HTML ={{HTML}}选择=＃T1＆GT;＆LT; /查找和GT;
 

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

}());

解决方案

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>

这篇关于从AngularJs响应显示事业部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！