Question

假设我有一个简单的形式：

<form ng-submit="methods.submit(formData)" ng-controller="diamondController" name="diamond" novalidate>
    <help-block field="diamond.firstName"></help-block>
    <input type="text" placeholder="" value="" id="firstName" name="firstName" ng-model="formData.firstName" class="" required>
</form>

然后我想用预定义的模板替换指令元素，但是将diamond.firstName解析为字段属性：

_core.directive('helpBlock', ['$compile', function($compile) {
    return {
        scope : {
            field : '@'
        },
        require : '^form',
        replace: true,
        template : '<p ng-show="scope.field.$invalid  && scope.field.$touched" class="help-block">Field is required.</p>',
        link : function(scope, element, attrs, formCtrl) {

        }
    }
}]);

我是否必须做一些事情来链接＆＃39; field＆＃39;到实际的表格数据？我无法解决这个问题。我或多或少只是想做到这一点，以便如果用户点击该字段并在不填写必填字段的情况下切换，则会显示该消息。

Answer 1

您可以使用双向数据绑定（=）绑定字段，并删除指令模板中的scope前缀：

app.directive('helpBlock', ['$compile', function($compile) {
  return {
    scope : {
      field : '='
    },
    replace: true,
    template : '<p ng-show="field.$invalid  && field.$touched" class="help-block">Field is required.</p>'
  }
}]);

请参阅plnkr。

Answer 2

他们做什么

ngShow和ngHide允许我们显示或隐藏不同的元素。这有助于创建Angular应用程序，因为我们的单页应用程序很可能会随着应用程序状态的变化而出现许多移动部件。

关于这些指令的重要之处在于我们不需要使用CSS或JavaScript进行任何显示或隐藏自己。这一切都由古老的Angular处理。

<强>用法

要使用ngShow或ngHide，只需将指令添加到您想要显示或隐藏的元素。

<!-- FOR BOOLEAN VALUES =============================== -->
<!-- for true values -->
<div ng-show="hello">this is a welcome message</div>   

 <!-- can also show if a value is false --> 
<div ng-show="!hello">this is a goodbye message</div>   

<!-- FOR EXPRESSIONS =============================== -->
<!-- show if the appState variable is a string of goodbye -->
<div ng-show="appState == 'goodbye'">this is a goodbye message</div> 

<!-- FOR FUNCTIONS =============================== -->
<!-- use a function defined in your controller to evaluate if true or false -->
<div ng-hide="checkSomething()"></div>

一旦我们在标记中设置了该设置，我们就可以通过多种不同方式设置hello或goodbye变量。您可以在Angular控制器中进行设置，并在应用加载时显示或隐藏div。

以上所有内容均可用于ng-show或ng-hide。如果值，表达式或函数返回true，这将隐藏某些内容。

有关详情 Click Here

如何在指令中使用ng-show切换表单元素？

2 个答案: