你能从ngBind表达式中获取element.text()吗?

时间:2022-08-25 23:23:45

I have a big long dumb directive using ngBindTemplate to accomplish this but if I could simply access the element.text() inside the expression I could essentially remove the directive.

我有一个很长的哑指令使用ngBindTemplate来完成这个,但如果我可以简单地访问表达式中的element.text(),我基本上可以删除该指令。

Question: How do I access 'element.text()' from the ngBind expression?

问题:如何从ngBind表达式访问'element.text()'?

<h1 ng-bind="worldMapCtrl.header.docs.intro || 'element.text()'">ABC</h1>

2 个解决方案

#1


0  

Don't think you can do it, sorry!

不要以为你能做到,对不起!

Did a test an was unable to access the element it self. If you do:

测试是否无法访问自己的元素。如果你这样做:

<h1 id="test" ng-bind="worldMapCtrl.header.docs.intro || this.$id">ABC</h1>

And then from the console do:

然后从控制台做:

angular.element(document.getElementById('test')).scope()

And check the $id you will see that they are the same. Also if you do:

并检查$ id,你会发现它们是相同的。如果你这样做:

angular.element(document.getElementById('test'))

You will see that the innerHTML is blank even if the ng-bind failed.

即使ng-bind失败,您也会看到innerHTML是空白的。

#2


0  

I made a not that long directive, that solves what you want, in case you still want to use a directive, let me know if this work for you.

我做了一个不那么长的指令,解决了你想要的,如果你还想使用指令,让我知道这是否适合你。

(function(angular) {
  'use strict';

  angular.module('app', [])
  .directive('dumbDirective', [function () {
    return {
      restrict: 'AE',
      scope: {
        htmlInput: '='
      },
      controller: SiteMenuController,
      controllerAs: 'vm',
      bindToController: true,
      templateUrl: 'dumb-directive-template.html'
    };

    function SiteMenuController() {
      this.text = angular.element(this.htmlInput).text();
    }
  }])

  .run(['$templateCache', function($templateCache) {
    $templateCache.put('dumb-directive-template.html',
      '{{ vm.text }}'
    );
  }]);

})(window.angular);

Directive usage:

// outputs just 'testing'
<dumb-directive html-input="'<span>testing</span>'"></dumb-directive> 

#1


0  

Don't think you can do it, sorry!

不要以为你能做到,对不起!

Did a test an was unable to access the element it self. If you do:

测试是否无法访问自己的元素。如果你这样做:

<h1 id="test" ng-bind="worldMapCtrl.header.docs.intro || this.$id">ABC</h1>

And then from the console do:

然后从控制台做:

angular.element(document.getElementById('test')).scope()

And check the $id you will see that they are the same. Also if you do:

并检查$ id,你会发现它们是相同的。如果你这样做:

angular.element(document.getElementById('test'))

You will see that the innerHTML is blank even if the ng-bind failed.

即使ng-bind失败,您也会看到innerHTML是空白的。

#2


0  

I made a not that long directive, that solves what you want, in case you still want to use a directive, let me know if this work for you.

我做了一个不那么长的指令,解决了你想要的,如果你还想使用指令,让我知道这是否适合你。

(function(angular) {
  'use strict';

  angular.module('app', [])
  .directive('dumbDirective', [function () {
    return {
      restrict: 'AE',
      scope: {
        htmlInput: '='
      },
      controller: SiteMenuController,
      controllerAs: 'vm',
      bindToController: true,
      templateUrl: 'dumb-directive-template.html'
    };

    function SiteMenuController() {
      this.text = angular.element(this.htmlInput).text();
    }
  }])

  .run(['$templateCache', function($templateCache) {
    $templateCache.put('dumb-directive-template.html',
      '{{ vm.text }}'
    );
  }]);

})(window.angular);

Directive usage:

// outputs just 'testing'
<dumb-directive html-input="'<span>testing</span>'"></dumb-directive>