角度定制指令

时间:2018-02-28 07:25:28

标签: angularjs angularjs-directive

我是Angular的新手,我一直在使用angular.io阅读他们的文档,我没有看到任何与使用模板创建自己的指令相关的内容。

我想知道下面这个指令是否可以在角度2中完成?

javascript文件

app.directive('sideDishRowDisplay', function($compile) {
      return {
        scope: {
            sideDishRowDisplay: "=", //import referenced model to our directives scope
            sideDishList: "="
        },
        templateUrl: 'html/templates/sideDishRow.html',
        link: function(scope, elem, attr, ctrl) {       
        }
      }
    })

sideDishRow.html

<select class="inputField" ng-model="sideDishRowDisplay.sideDishSelect" ng-change="$parent.$parent.getTotalPrice()"
        ng-options="dish.name for dish in sideDishList | filter: dish.type='sideDish'" required>
        <option value="">-- Select Side Dish --</option>
    </select>
</td>
<td>
    <!-- Binding the input field to the parent to the cost of the item. -->
    <input class=inputPrice type="number" ng-model="sideDishRowDisplay.sideDishSelect.price" disabled required>
</td>
 <td>
    <button ng-if="sideDishRowDisplay.name != 'sideDishRow0'" ng-click="$parent.$parent.removeSideDishRow(sideDishRowDisplay)">Remove</button>
 </td>

main.html中

</tr>
    <tr ng-repeat="field in data.fields" side-dish-row-display="field" side-dish-list="dishList">   
</tr>

0 个答案:

没有答案