Question

我可以从我的指令中获取一些文本到我的指令控制器中，如下所示：

html：

<my-directive text="Some text"></my-directive>

在指令中，我可以抓住这样的文字：

bindToController: {
  text: "@"
};

我可以在指令的控制器中使用它：

controller: function() {
  this.textUpperCase = this.text.toUpperCase();
}

但是我怎样才能通过翻译来控制指令控制器中的文本？这样我就可以拥有这样的html：

<my-directive>Some text</my-directive>

Answer 1

如评论中所述，您可以使用element.html()或翻译。

但我更喜欢翻译，因为这样可以更轻松地处理数据。您可以在控制器中使用$transclude，也可以在编译或链接方法中使用transcludeFn。

在这里，我认为最好的是控制器。

请查看此fiddle或以下演示。

我认为将$element注入控制器不会起作用，因为您将获得未编译的模板，而不包含您正在寻找的数据。

＆＃13;

angular.module('demoApp', [])
.controller('mainCtrl', function($scope) {
    $scope.hello = 'hello world from scope';
})
.directive('upperCase', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: {
        },
        template: '<div>{{text}}</div>',
        controller: function($scope, $transclude, $element) {
            $transclude(function(clone, scope) {
                //console.log(clone.text(), scope.hello);
                console.log(clone);
                $scope.text = clone.text().toUpperCase();
                //transcludedContent = clone;
                //transclusionScope = scope;
            });
            //console.log($element.html()); // not working will get the uncompiled template from directive
            console.log($scope.text); // can be used here too
        },
        link: function(scope, element, attrs, ctrl, transclude) {
            var text = element.html();
            //console.log(transclude);
            //element.html(text.toUpperCase()); // also working (add ng-transclude to your template)
        }
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainCtrl">
    <upper-case>hello world</upper-case>
    <upper-case>hello angular</upper-case>
</div>

＆＃13;

在指令控制器中获取transcluded文本

1 个答案: