Question

与绑定有点混淆......

如何将输入字段中的值正确绑定到textarea？

 app.controller('MainCtrl', function($scope) {
  $scope.hello = 'Hello';
  $scope.world = 'World!'
  //this template comes from json
  $scope.fromjson = "{{hello}} {{world}} and have a good time";
  //this template comes from json
});

一个简单的身体：

 <body ng-controller="MainCtrl">
  <input ng-model="hello">
  <input ng-model="world">
  <helloworld></helloworld>
  </body>

我必须编辑我悲惨的例子，因为你的善意的答案并没有解决我的问题。

我有很多独特的文字 - 字母模板，其中一些字段应由用户填写。根据所选文本有条件地发生十个字段。

text1: "Blah, blah {{field.first}}.blah {{filed.second}}" 
text2: "{{field.third}} blah, blah {{field.first}}"
text3: "Blah, blah {{field.fourth}}"
and so on...

文本存储在数据库中并通过JSON

获取

 function(textid) {
    $http.get('json/json.php',
    {    params: { id: textid } }).
    success(function(data, status, headers, config) {
    $scope.SelectedText = data;
    })
    };

我组织了一个表单，其中包含所有十个输入字段，可见取决于选定的文字。完成/填充的模板应该在表格底部的textarea中可见，以便复制到另一个地方。

我应该更改模板的存储方式吗？
或回到问题是否有其他方式可以将字段插入视图？

Answer 1

我认为你想要的是这个：

app.controller('MainCtrl', function($scope) {
  $scope.hello = 'Hello';
  $scope.world = 'World!'
  //this template comes from json
  $scope.fromjson = function(){
     return $scope.hello + " " + $scope.world + " and have a good time";
  };
});

app.directive('helloworld', function() {
  return {
    restrict: 'E',
    template: '<textarea>{{fromjson()}}</textarea>'
  };
});

此处示例：http://plnkr.co/edit/8YrIjeyt9Xdj2Cf7Izr5?p=preview

您的代码的问题在于，当您声明$scope.fromjson = "{{hello}} {{world}} and have a good time"时，您没有绑定任何内容，您只是将该字符串分配给fromjson属性。

修改：

正如HeberLZ在下面的评论中指出的那样，这样做会更有效率：

app.controller('MainCtrl', function($scope) { $scope.hello = 'Hello'; $scope.world = 'World!' }); app.directive('helloworld', function() { return { restrict: 'E', template: '<textarea>{{ hello + " " + world + " and have a good time"}}</textarea>' }; });

Answer 2

我认为你需要的是$interpolate服务和$scope.$watch看看这个jsfiddle：

http://jsfiddle.net/michal_taborowski/6u45asg9/

app.controller('MainCtrl', function($scope,$interpolate) {
  $scope.hello = 'Hello';
  $scope.world = 'World!';
  //this template comes from json
  $scope.template = " {{hello}} {{world}} and have a good time";
  //this template comes from json   

  var updateTemplate = function(oldVal,newVal,scope){
     scope.fromjson = $interpolate(scope.template)(scope);
  }

  $scope.$watch('hello', updateTemplate );
  $scope.$watch('world', updateTemplate );

});

当然，您应该将$watch移动到指令中的链接函数，并将hello和world作为范围变量传递给此指令 - 这只是一个快速示例，您可以如何做到这一点

Answer 3

一种方式是这样的：

控制器：

app.controller('MainCtrl', function($scope) {
  $scope.hello = 'Hello';
  $scope.world = 'World!'
});

指令：

app.directive('helloworld', function($http) {
  return {
    restrict: 'E',
    scope: {
      'hello': '=',
      'world': '='
    },
    link: function(scope){
      scope.jsonFromServer = '';
      $http.get('someUrl').then(function(response){
        scope.jsonFromServer = response.data;
      });

      var updateFromjson = function(){
        scope.fromjson = scope.hello + ' ' + scope.world + ' ' + scope.jsonFromServer;
      }

      scope.$watch('hello', updateFromjson);
      scope.$watch('world', updateFromjson);
    }
    template: '<textarea>{{fromjson}}</textarea>'
  };
});

体：

<body ng-controller="MainCtrl">
  <input ng-model="hello">
  <input ng-model="world">
  <helloworld hello="hello" world="world"></helloworld>
</body>

Answer 4

app.controller('MainCtrl', function($scope) {
  $scope.hello = 'Hello';
  $scope.world = 'World!'
  //this template comes from json
  $scope.aDiffFunc = function() {
      return $scope.hello + " " + $scope.world + " and have a good time";
  };
  //this template comes from json

});

app.directive('helloworld', function() {
  return {
    restrict: 'E',
    template: '<textarea>{{aDiffFunc()}}</textarea>'
  };
});

这应该是吗？

http://plnkr.co/edit/ygA4U0v7fnuIbqAilrP7?p=preview

AngularJS指令 - 来自$ scope的模板和其他指令

4 个答案: