Question

我希望将控制器功能用作元素属性，如下所示：

<div ng-app='myApp'>
  <div ng-controller='myController as ctrl'>
    <div {{ ctrl.choose_attribute() }}></div>
  </div>
</div>

choose_attribute函数将返回一个与许多指令之一匹配的字符串。但是，我渲染的html看起来像这样：

<div ng-app='myApp'>
  <div ng-controller='myController as ctrl'>
    <div }}='' ctrl.choose_attribute()='' {{=''></div>
  </div>
</div>

我是以错误的方式接近这个，还是有一些技巧让返回值显示为属性？

修改看来我选择的“属性”这个词并不是那么好，所以这里有一个我想要创建的示例指令：

angular.module('myApp', [])
.controller('myController', function() {
  this.choose_attribute = function () {
    if (DataService.some_value == 'blah') {
      return 'content1';
    } else {
      return 'content2';
    }
  };
})
.directive('content1', function() {
  return {
    restrict: 'A',
    template: '<div>some content</div>'
  };
})
.directive('content2', function() {
  return {
    restrict: 'A',
    template: '<div>some other content</div>'
  };
});

Answer 1

作为属性名称放置时，不会评估表达式。

将进行评估：<div class="{{value}}">Text</div>

不是否会被评估：<div {{value}}>Text</div>

你需要的是一个指令，它接受一个指令来添加，将它作为一个属性添加到元素然后编译它。

以下是一个例子：

app.directive('addDirective', function($parse, $compile) {

  return {
    compile: function compile(tElement, tAttrs) {

      var directiveGetter = $parse(tAttrs.addDirective);

      return function postLink(scope, element) {

        element.removeAttr('add-directive');

        var directive = directiveGetter(scope);
        element.attr(directive, '');

        $compile(element)(scope);
      };
    }
  };
});

用法：

<body ng-controller="MainCtrl as ctrl">
  <div add-directive="ctrl.choose_attribute()"></div>
  <div add-directive="ctrl.attribute"></div>
</body>

和JS：

app.controller('MainCtrl', function() {

  this.choose_attribute = function() {
    return 'content1';
  };

  this.attribute = 'content2';
});


app.directive('content1', function() {
  return {
    restrict: 'A',
    template: '<div>some content</div>'
  };
});

app.directive('content2', function() {
  return {
    restrict: 'A',
    template: '<div>some other content</div>'
  };
});

演示： http://plnkr.co/edit/Kqdtb4wDYha9OebtVkEl?p=preview

angularjs控制器作为属性

1 个答案: