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>

而角度会将其转化为：

<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 的值别名到名为条目的范围变量上。不幸的是，使用元素限制指令无法做到这一点。什么阻止它发生不是Angular，它是html5指南，使你想要做的事情变得不可能。您将不得不使用属性指令而不是元素指令。

Answer 3

我可能找到了解决方案。它依赖于指令的transclude函数。它有效，但我需要更好地理解翻译，然后才能确定这是正确的方法。

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

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

3 个答案: