如何将标签的内容绑定到指令的范围内？

Question

假设我有这样的指令：

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

Answer 1

我认为已经给出的解决方案要简单得多。据我了解，您希望在指令初始化期间将元素的内容绑定到范围。

鉴于此 html：

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

定义bind-content如下：

directive('bindContent', function() {
  return {
    require: 'ngModel',
    link: function ($scope, $element, $attrs, ngModelCtrl) {
      ngModelCtrl.$setViewValue($element.text());
    }
  }
})

这是demo。

Answer 2

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

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!";
});

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

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

Angular 会把它变成：

<div>THIS IS MY ENTRY</div>

假设您已正确设置角度并将此 JS 文件包含到您的页面中。

编辑

听起来您想要执行以下操作：

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

这对于 ELEMENT 指令是不可能的。但是，它具有属性指令。检查以下内容。

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

然后像这样使用它：

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

这会将传递给 my-directive 的值设置为一个名为 entry 的范围变量。不幸的是，没有办法使用元素限制指令来做到这一点。阻止它发生的不是 Angular，而是 html5 指南使您想要做的事情变得不可能。您将不得不使用属性指令而不是元素指令。

Answer 3

我可能已经找到了解决方案。它依赖于指令的嵌入功能。它有效，但在确定这是正确的方法之前，我需要更好地理解嵌入。

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