如何在 angularjs 中使用一些逻辑在多个地方使用相同的组件

Question

好吧，我有一个 directive/component/controller，即 <app-form></app-form> 我正在将此 html 页面用于多个位置，但我想从不同的就地组件中删除一些特定字段我怎么能在 angularjs

中做

在 reactjs 中我们可以这样做 <app-form disableField></app-form> 并且如果 disabledField 则禁用特定字段否则什么都不做

再次为了更好地理解，例如我们有一个表格，其中包含姓名、电子邮件和出生日期，同一表格正在使用多个位置，但在一个地方我们没有兴趣显示出生日期，我们如何从特定位置禁用或删除？

请指导

Answer 1

您必须在组件声明中使用绑定。类似于：

angular.module('app').component('appForm', {
    controller: 'AppFormCtrl',
    templateUrl: 'app-form.html',
    bindings: {
        disableField: "<", // use '<' to generate input on the component
    }
});

然后在您的 app-form.html 中，您可以使用 $ctrl 对象访问输入变量：

<form>
    <input ng-if="$ctrl.disableField == true" type="text"/>
</form>

并且您可以在根视图的范围内传递任何您想要的值：

<div>
   <!-- displays the form input according to the passed property's value -->
   <app-form disable-field="isFieldEnabled"></app-form>
   <!-- displays the form input -->
   <app-form disable-field="true"></app-form>
   <!-- does NOT display the form input -->
   <app-form disable-field="false"></app-form>
   <!-- does NOT display the form input, as disableField is evaluated an NULL in the component instance -->
   <app-form></app-form> 
</div>

isFieldEnabled 是根控制器 $scope 中的属性，它将控制组件中输入字段的启用/禁用，但您可以简单地传递 true如果不使用逻辑，则为 false。

你可以附加任何你想要的属性，它不一定是布尔值（但在这种情况下我认为它有意义）。

此外，请注意，在 Javascript 环境中定义绑定属性 'disableField' 时，我们使用 camelCase。使用kebab-case.

将在视图/html 环境中定义相同的属性

您还可以查看以下答案以了解如何从组件实例生成输出：

如何在 angularjs 中使用一些逻辑在多个地方使用相同的组件

how to use same component in multiple place with some logic in angularjs

angularjs