从控制器设置 angularjs 指令属性

Question

我正在使用 Angular Bootstrap typehead 指令，可以从 HTML 像这样配置它：

<div ng-controller="search">
  <input typeahead-focus-first="false" />
</div>

是否可以改为从 ng-controller 设置 'typeahead-focus-first' 属性？

Answer 1

如果您的控制器范围有属性

$scope.typeahead = true;

然后

<div ng-controller="search">
  <input ng-if="typeahead" typeahead-focus-first="false" />
  <input ng-if="!typeahead" />
</div>

或

<div ng-controller="search">
  <input typeahead-focus-first="typeahead" />
</div>

第二种方法需要您的预输入指令能够解析预输入表达式。有几种方法可以实现这一点（例如隔离范围或 $parse）。 angular bootstrap 中的 typeahead 指令为您完成此操作，因此第二种方法应该有效。

编辑：作为指令

.directive('search', function() {
    return {
        restrict: 'E',
        template: '<div><input typeahead-focus-first="false" /></div>',
        scope: true,
        controller: function($scope) {
        },
        link: function(scope, element, attrs) {
            //this is where you want to do your DOM manipulation (if any)
        }
    };
})

用法：

<search></search>

Answer 2

提前输入属性是从 attr 中用这个表达式计算的：

var focusFirst = originalScope.$eval(attrs.typeaheadFocusFirst) !== false;

所以你应该在你的范围内设置一个变量

$scope.typeahead = true;

然后

<div ng-controller="search">
    <input typeahead-focus-first="{{typeahead}}" />
</div>

提前输入来源here。

编辑：从评论中可以看出，您似乎想从控制器编辑行为而不在 dom 上写任何东西。不幸的是，我认为这是不可能的，因为控制该行为的变量在编译时保存在闭包内，并且在链接组件后不可修改。您需要重新编译组件以更改该行为，例如使用 ng-if.

从控制器设置 angularjs 指令属性

Set angularjs directive attribute from a controller

angularjs

angularjs-directive

angular-ui-bootstrap