Question

我想通过ATTRIBUTE而不是孤立的范围传递对象（引用 - 双向绑定）。我怎样才能做到这一点？因为代码低于传递字符串而不是对象：

HTML

<tr ng-form="rowForm" myDirective="{{row.data}}">

指令

angular.module("app").directive("myDirective", function () {
    return {
        require: ["^form"],
        restrict: "A",
        link: function (scope, element, attrs, ctrls) {
            scope.$watch(function () {
                return attrs.myDirective;
            }, function (newValue, oldValue) {
            // .....

Answer 1

{{ }}插值的结果是一个字符串。对象不能像那样传递。

绑定在这里是惯用的，因此是优选的。当指令被强制使用父范围时，整个事情变得混乱。但是，可以通过使用$parse：

手动解析范围属性来完成

  $scope.$watch(function () {
    var myDirectiveGetter = $parse($attrs.myDirective);
    return myDirectiveGetter($scope);
  }, ...);

这是绑定工作（<或=，视情况而定）。如果不希望使用隔离范围，则可以使用继承范围和bindToController：

来完成

scope: true,
bindToController: {
  myDirective: '<'
},
controllerAs: `vm`,
controller: function ($scope) {
  $scope.$watch('vm.myDirective', ...);
}

请注意，指令属性为my-directive，而不是myDirective。

Answer 2

指令可以进行双向数据绑定而无需手动解析或编译任何内容，抱歉不提供plunker但是它反叛并且不会为我保存

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.myObj = {name: 'Tibro', age: 255}
})
.directive('myDirective', function(){
  return {
    scope: {
      'myAttribute': '='
    },
    template: '{{myAttribute}}',
    link: function(scope){
      scope.myAttribute.age= 31
    }
  }
})

HTML

  <body ng-controller="MainCtrl">
    controller: {{myObj}} <br/>
    directive: <my-directive my-attribute="myObj"></my-directive>
  </body>

输出

controller: {"name":"Tibro","age":31} 
directive: {"name":"Tibro","age":31}

你可以从输出中看到传递对象已被双向绑定，并且指令中的更改反映在控制器级别上

Answer 3

一些事情：

tr

myDirective应为my-directive 约定。
{{row.data}}打印变量，你需要在没有它的情况下传递它 {{}}让它作为一个对象。

如何通过AngularJS中的属性将对象传递给指令？

3 个答案:

JS

HTML

输出