Angularjs 如何将标签内容绑定到指令'；什么范围？

假设我有这样一个指令：

<my-directive>This is my entry!</my-directive>

这是我的条目！

如何将元素的内容绑定到指令的范围中

myApp.directive('myDirective', function () {
    return {
        scope : {
            entry : "" //what goes here to bind "This is my entry" to scope.entry?
        },
        restrict: "E",
        template: "<textarea>{{entry}}</textarea>"
        link: function (scope, elm, attr) {
        }
    };
});

myApp.directive（'myDirective'，函数（）{
返回{
范围：{
entry://这里是什么将“This is my entry”绑定到scope.entry的？
},
限制：“E”，
模板：“{entry}}”
链接：功能（范围、elm、属性）{
}
};
});

您需要在指令中添加一个模板

myApp.directive('myDirective', function () {
  return {
    scope : {
      entry : "=" //what goes here to bind "This is my entry" to scope.entry?
    },
    template: "<div>{{ entry }}</div>", //**YOU DIDN'T HAVE A TEMPLATE**
    restrict: "E",
    link: function (scope, elm, attr) {
      //You don't need to do anything here yet
    }
  };
});

myApp.controller('fooController', function($scope){
  $scope.foo = "BLAH BLAH BLAH!";
});

myApp.directive（'myDirective'，函数（）{
返回{
范围：{
entry:“=”//此处是什么将“这是我的条目”绑定到scope.entry？
},
模板：{{entry}}，//**您没有模板**
限制：“E”，
链接：功能（范围、elm、属性）{
//你不需要在这里做任何事情
}
};
});
myApp.controller（'fooController'，函数（$scope）{
$scope.foo=“诸如此类！”；
});

然后像这样使用您的指令：

<div ng-controller="fooController">
  <!-- sets directive "entry" to "foo" from parent scope-->
  <my-directive entry="foo"></my-directive>
</div>

<div my-directive="foo"></div>

角度会把它变成：

<div>THIS IS MY ENTRY</div>

这是我的条目

假设您正确设置了angular，并将此JS文件包含在页面中

编辑

听起来您希望执行以下操作：

<my-directive="foo"></my-directive>

这在元素指令中是不可能的。但是，它使用属性指令。检查以下各项

myApp.directive('myDirective', function () {
  return {
    template: "<div>{{ entry }}</div>", //**YOU DIDN'T HAVE A TEMPLATE**
    restrict: "A",
    scope : {
      entry : "=myDirective" //what goes here to bind "This is my entry" to scope.entry?
    },
    link: function (scope, elm, attr) {
      //You don't need to do anything here yet
    }
  };
});

myApp.directive（'myDirective'，函数（）{
返回{
模板：{{entry}}，//**您没有模板**
限制：“A”，
范围：{
条目：“=myDirective”//这里是什么将“这是我的条目”绑定到scope.entry的？
},
链接：功能（范围、elm、属性）{
//你不需要在这里做任何事情
}
};
});

然后像这样使用它：

<div ng-controller="fooController">
  <!-- sets directive "entry" to "foo" from parent scope-->
  <my-directive entry="foo"></my-directive>
</div>

<div my-directive="foo"></div>

---

这将把传递给my指令的值别名到名为entry的范围变量上。不幸的是，使用元素受限指令无法做到这一点。阻止它发生的不是角度，而是html5的指导方针让你想做的事情变得不可能。必须使用属性指令而不是元素指令

我可能已经找到了解决办法。它依赖于指令的转移功能。这是可行的，但在确定这是正确的方法之前，我需要更好地理解转换

myApp.directive('myDirective', function() {
    return {
        scope: {
        },
        restrict: 'E',
        replace: false,
        template:   '<form>' +
                        '<textarea ng-model="entry"></textarea>' +
                        '<button ng-click="submit()">Submit</button>' +
                    '</form>',
        transclude : true,
        compile : function(element,attr,transclude){

            return function (scope, iElement, iAttrs) {

                transclude(scope, function(originalElement){
                    scope.entry = originalElement.text(); // this is where you have reference to the original element.
                });


                scope.submit = function(){
                    console.log('update entry');
                }
            }
        }
    };
});

myApp.directive（'myDirective'，function（）{
返回{
范围：{
},
限制：'E'，
替换：false，
模板：“”+
'' +
“提交”+
'',
是的，
编译：函数（元素、属性、转置）{
返回功能（范围、IELENT、iAttrs）{
转移（范围、功能（原始元素）{
scope.entry=originalElement.text（）；//这是对原始元素的引用。
});
scope.submit=函数（）{
log（'update entry'）；
}
}
}
};
});

我认为对于已经给出的解决方案，有更简单的解决方案。据我所知，您希望在指令初始化期间将元素的内容绑定到范围

myApp.directive('myDirective', function () {
  return {
    scope : {
      entry : "=" //what goes here to bind "This is my entry" to scope.entry?
    },
    template: "<div>{{ entry }}</div>", //**YOU DIDN'T HAVE A TEMPLATE**
    restrict: "E",
    link: function (scope, elm, attr) {
      //You don't need to do anything here yet
    }
  };
});

myApp.controller('fooController', function($scope){
  $scope.foo = "BLAH BLAH BLAH!";
});

鉴于此html：

<textarea bind-content ng-model="entry">This is my entry!</textarea>

---

这是一个。

啊，是的。我忘了带模板了。我把它加进去了，你可以看到我在努力完成什么。我试图将数据从使用该指令的位置移动到link函数中。当数据作为属性包含在指令的标记中时，这很容易实现，但是不清楚如何从标记中获取内容。你的答案没有回答这个问题。现在呢？下面是一个如何在控制器中使用指令的示例。我修复了指令配置中的作用域声明。我希望将指令标记内部的内容绑定到指令的作用域中，而不是使用属性。首先如何将内容添加到html中？通常是$scope定义了要在视图中显示的内容，而不是显示的方式。此元素的内容添加在服务器端。角度模板是使用PHP应用程序生成的，因为在本例中，内容不能以RESTful方式使用。我可以将内容添加为属性，但鉴于此指令的作用类似于

，为了便于开发人员理解，我希望保留

的用法。我认为旧版本的IE不喜欢带有元素名称的指令，这就是为什么首选属性或类的原因。不确定这是否是您的用例的一部分，但值得考虑Grandma的IE6。在这一过程中，您将值（

条目

）的键放在两个单独的位置（模板和链接函数）。最好保持

ng model=“entry”

原样，但使用

ngModelCtrl.$setViewValue

而不是我的答案中的

scope.entry

。