Question

听起来不是什么大不了，但我不知道谷歌要解决这个问题。我希望能够使用$ http获取一个对象，然后在指令的帮助下呈现该信息。

JS：

angular.module("test", []);
angular.module("test").directive('myTest', function() {
  return {
    templateUrl: 'myTest.html'
  };
});
angular.module("test").controller("myCtrl", function($http, $compile){
  var vm = this;
  vm.name = "Viktor";
  vm.country = "Sweden";
  vm.origin = "controller";
  vm.click = function(){
    $http.get("data"+Math.floor((Math.random() * 2) + 1)+".json").success(function(data){ 
      $("body").append($compile("<my-test></my-test>")(data));
    })
  }
})

模板：

<div>
  <div>My name is: {{vm.name}}</div>
  <div>I live in : {{vm.country}}</div>
  <div>Source origin : {{vm.origin}}</div>
</div>

的index.html

<!DOCTYPE html>
<html ng-app="test">

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.4.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-controller="myCtrl as vm">
    <button ng-click="vm.click()">Add panel</button>
    <my-test></my-test>
  </body>

</html>

Plunker：http://embed.plnkr.co/YcG9ZFxuR3PYBYASjzm2/preview

Answer 1

我无法编辑您的plnkr文件。

但是bindToController应该可以帮到你。它应该像这样，我为指令创建一个控制器：

angular.module("test").directive('myTest', function() {    
    return {
        restrict: 'E',
        scope: {},
        templateUrl: 'myTest.html',
        controller: function(){},
        controllerAs: 'ctrl',
        bindToController: {
            name: '=',
            country: '=',
            origin: '='}
        }
});

此外，我还更改了模板中控制器的别名：

<div>
  <div>My name is: {{ctrl.name}}</div>
  <div>I live in : {{ctrl.country}}</div>
  <div>Source origin : {{ctrl.origin}}</div>
  <input ng-model="ctrl.name"/>
</div>

以下是您在plunkr上修改的工作示例：plunkr。

Answer 2

我仍然坚持jQuery的思维方式，我想我发现了如何以Angular的方式做到这一点。只是将新获取的项添加到列表中，然后呈现列表。不是我最初的目标，但这可能是最漂亮的方式。

如果现在需要添加新项而不是重绘整个列表，我想可以将对象作为json-string发送，或者在指令中为对象中的每个参数设置范围变量。

Plunker：http://plnkr.co/edit/5ElTIx?p=preview

HTML：

<body ng-controller="myCtrl as vm">
    <button ng-click="vm.click()">Add panel</button>
    <my-test ng-repeat="panel in vm.panels" obj="panel"></my-test>
</body>

JS：

angular.module("test").controller("myCtrl", function($http, $compile){
  var vm = this;
  vm.name = "Viktor";
  vm.country = "Sweden";
  vm.origin = "controller";
  vm.panels = [{
    name:"Viktor2",
    origin:"Controller array",
    country:"Sweden"
  }];
  vm.click = function(){
    $http.get("data"+Math.floor((Math.random() * 2) + 1)+".json").success(function(data){ 
      vm.panels.push({
        name:data.name,
        origin:data.origin,
        country:data.country
      })
    })
  }
})

Angular使用object作为参数添加动态html（指令）

2 个答案: