angular創建一個組件

1.添加一個API藉口

/**
 * 
 * @author hewenjun
 *
 */

@RestController
@RequestMapping(ComponentSource.PATH)
public class ComponentSource {
	
	public final static String PATH = WebConstant.URL_PREFIX_BACKEND + "/acs/component/source/";
  
	@Autowired
	private SourseService sourseService;
	/**	
     * 
     * @param oahCode
     * @return
     */
    @RequestMapping("init")
    public List<SourseVo> init(HttpServletRequest request) {
    	String oahCode = ContextHolder.sessionUserOahCode(request);
    	List<SourseVo> clinics = sourseService.getSourseByOah(oahCode);
    	return clinics;
    }
	  
}

2.創建一個組件（.js）

angular.module('app')
	.directive('acsSource', ['httpPost','$timeout',
			function(httpPost, $timeout) {
				var directive = {};
				directive.restrict = 'AE';
				directive.templateUrl = 'js/directives/templates/acs-multidata.html';
				directive.transclude = true;
				directive.scope = {
					target: '=',
//					name: '@',
					required: "=",
					change: '&',
					disabled: '='
				};
				directive.link = function($scope, element, attributes) {
					$scope.requestPath = 'acs/component/source/init';
					$scope.items = [];
					$scope.onModelChange = function(){
						if($scope.change){
							$timeout(function() {
								$scope.change();
							}, 100);
						}
					}
					
					$scope.initPageData = function(){
						httpPost.send($scope.requestPath, {}, function(res){
							$scope.items= res.data;
						})
					}
					$scope.initPageData();
				}
				return directive;
}]);

3.組件中引入的頁面（templateUrl ）

<select ng-model="target"
		class="form-control"
		ng-required="{{required}}"
		ng-change="onModelChange()"
		ng-disabled="disabled">
	<option value="" >----</option>
	<option value="{{item.code}}"
			ng-repeat="item in items"
			ng-selected="target == item.code">
		{{item.text}}
	</option>
</select>

4.在html中引入組件.js

<script th:src="@{js/directives/acs-source.js}"></script>

5.html實際引用

<acs-source target="entity.source" required="true"> </acs-source >

target是在查看頁面時數據庫查出來的字段值