AngularJS前端,directive的template的點擊事件 綁定

HTML部分

<div class="panel-con">
	<!--動態生成分配規則參數錄入表單控件-->
	<distribution rule="distributionRules" old-rule="oldDistribution" params="params" old-flag="distributionProjectId" model="model"
				  sub-param="subParam" date-sub-param="dateSubParam" on-rule-change="distributionParam()" show-md-period="showMdPeriod();"
				  add-section-rate="addSectionRate()" initial-scale-list="initialScaleList"></distribution>
</div>

JS部分

app.directive("distribution", function () {
    return {
        restrict: 'AE',
        scope: {
            params:'=',
            rule: '=',
            oldFlag: '=',
            oldRule: '=',
            model: '=',
            subParam: '=',
            dateSubParam: '=',
            onRuleChange: '&',
            showMdPeriod: '&',
            addSectionRate : '&',
            initialScaleList : '='
        },

其中scope部分的符號,可以參考:https://www.cnblogs.com/mafeifan/p/5817626.html

@

單項綁定的前綴標識符
使用方法:在元素中使用屬性,好比這樣<div my-directive my-name="{{name}}"></div>,注意,屬性的名字要用-將兩個單詞連接,因爲是數據的單項綁定所以要通過使用{{}}來綁定數據。

=

雙向數據綁定前綴標識符
使用方法:在元素中使用屬性,好比這樣<div my-directive age="age"></div>,注意,數據的雙向綁定要通過=前綴標識符實現,所以不可以使用{{}}

<

單項綁定的前綴標識符,和=使用類似。不同的是改變內部scope不會反映到parentscope

使用方法:在元素中使用屬性,好比這樣<my-component my-attr="parentModel">,directive的定義scope: { localModel:'<myAttr' }代碼

&

綁定函數方法的前綴標識符
使用方法:在元素中使用屬性,好比這樣<div my-directive change-my-age="changeAge()"></div>,注意,屬性的名字要用-將多個個單詞連接。

'<table class="form-table floatL">' +
					'<tbody>' +
						'<tr ng-repeat="initialScaleInfo in initialScaleList" on-finish-render-filters>' +
							'<td class="textCenter border-R-e3">\n' +
								'<div style="float: left"><input type="text" ng-change="onRuleChange();" ng-model="initialScaleList[$index].month" id="initialScaleListMonth_{{$index}}" style="width:14px;"/></div>' +
								'<div style="float: left; margin-top: 8px;">&nbsp月&nbsp&nbsp</div>' +
								'<div style="float: left"><input type="text" ng-change="onRuleChange();" ng-model="initialScaleList[$index].day" id="initialScaleListDay_{{$index}}" style="width:14px;"/></div>' +
								'<div style="float: left; margin-top: 8px;">&nbsp日&nbsp&nbsp</div>' +
								'<div ng-click="deleteSectionRate($index);onRuleChange()" style="margin-right:-53px; background: red;"' +
									'class="panel-btn look-product floatR margL5">' +
									'刪除' +
								'</div>' +
							'</td>' +
						'</tr>' +
					'</tbody>' +
				'</table>' +
				'<div class="clearFloat"></div>' +
				'</div>' +
			'</div>',
link: function ($scope) {
	// 分配頻率添加按鈕
	$scope.deleteSectionRate = function(index) {
		$scope.initialScaleList.splice(index, 1);
	}
}

歡迎關注微信號【Java小竈臺】,一起學習

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章