var app =
angular.module('sexapp', ['app'])
.factory('SexFactory', function ($http,
RestfulUriFactory) {
var factory = {};
//Get an Agent
factory.GetAll =
function (encryptId) {
var getUri =
RestfulUriFactory.GET_ALL_SEX_URI;
return $http.get(getUri).error(function (status, headers,
config) {
console.log(status, headers,
config);
}).then(function (response) {
return response;
}).catch(function (e) {
throw e;
});
};
return factory;
});
|
angular.module('directive-sex-app', ['sexapp'])
.factory('SexQueryFactory', function ($q,
RestfulUriFactory, SexFactory) {
var factory = {};
factory.GetAll = function () {
var getAllJob = $q.defer();
var getAllJobPromise =
getAllJob.promise;
var getPromise = SexFactory.GetAll();
getPromise.then(function (response) {
getAllJob.resolve(response.data);
});
return getAllJobPromise;
}
return factory;
})
.directive('sex', function (SexQueryFactory)
{
return {
scope: true,
//return trmplate
template: '<select
class="form-control" ng-model="item.Sex"
ng-options="option.Id as option.Name for option in SexOptions track by
option.Id" />',
link: function ($scope) {
},
controller: function ($scope, $element) {
var getAllSexPromise = SexQueryFactory.GetAll();
getAllSexPromise.then(function (data) {
$scope.SexOptions = data;
});
}
}
});
|
<div class="col-md-6" sex>
</div>
|
Directives are markers on a DOM
element (such as an attribute, element name, comment or CSS class) that tell
AngularJS's HTML compiler ($compile) to attach a specified behavior to that
DOM element (e.g. via event listeners), or even to transform the DOM element
and its children. - from docs.angularjs.org
|
<div class="form-horizontal" ng-app="app" ng-controller="CreateCtrl">
<div class="form-group">
<label class="control-label col-md-2" for="EnabledOn">啟用日期</label>
<div class="col-md-10">
<input type="datetime" enabledon ng-model="EnabledOn"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">停用日期</label>
<div class="col-md-10">
<table width="100%">
<tr>
<td>
<input type="datetime" disabledon ng-disabled="disabledDisabledOn" ng-model="DisabledOn" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" ng-model="Permanent" ng-checked="checkedPermanent" /> 永久有效
</td>
</tr>
</table>
</div>
</div>
</div>
|
angular.module('enabledonapp', [])
.directive('enabledon', function () {
return {
scope:
true,
link: function ($scope) {
},
controller: function ($scope,
$element) {
//Initialize
var date = new Date();
$scope.EnabledOn =
moment(date).format('YYYY/MM/DD');
}
}
});
|
angular.module('disabledonapp', [])
.directive('disabledon', function () {
return {
scope:
true,
link: function ($scope) {
//當勾選/取消 永久有效 (Checkbox)
$scope.$watch("Permanent", function (newValue, oldValue)
{
if (newValue == true) {
$scope.DisabledOn = '9999/12/31'
$scope.disabledDisabledOn
= true;
}
else {
var date = new Date();
$scope.DisabledOn = moment(date).format('YYYY/MM/DD');
$scope.disabledDisabledOn
= false;
}
});
},
controller: function($scope, $element)
{
//The watch can put here, it will
execute before link function.
$scope.checkedPermanent = false; //ng-check for
Checkbox : 永久有效
$scope.disabledDisabledOn = false; //ng-disable for
Textbox : 停用日期
//Initialize
var date = new Date();
$scope.DisabledOn =
moment(date).format('YYYY/MM/DD');
}
}
});
|
scope
|
u “false” : Use the
parent scope.
u “true” : Use the child
scope inherit from the parent and which aren’t relevant to other directives.
u “{}” : Isolated
scope.
|
link
|
A
function that contains the core logic of the directive.
|
controller
|
Controller
for the directive.
|
var app =
angular.module('app', ['disabledonapp', 'enabledonapp'])
.controller('CreateCtrl', function ($scope, $http,
$q) {
});
|
<div ng-app="app" ng-controller="EnabledDurationCtrl">
<b>This is a test page for
EnabledDuration directive</b>
<hr />
<div enabledduration>
</div>
</div>
|
<div class="form-group">
<label class="control-label col-md-2" for="EnabledOn">啟用日期</label>
<div class="col-md-10">
<input type="datetime" ng-model="EnabledOn"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">停用日期</label>
<div class="col-md-10">
<table width="100%">
<tr>
<td>
<input type="datetime" ng-disabled="disabledDisabledOn" ng-model="DisabledOn" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" ng-model="Permanent" ng-checked="checkedPermanent" /> 永久有效
</td>
</tr>
</table>
</div>
</div>
|
angular.module('enableddurationapp', [])
.directive('enabledduration', function () {
return {
scope: true,
templateUrl: '/HTML/EnabledDurationPartialView.html',
link: function ($scope) {
//當勾選/取消 永久有效 (Checkbox)
$scope.$watch("Permanent", function (newValue,
oldValue) {
if (newValue == true) {
$scope.DisabledOn = '9999/12/31'
$scope.disabledDisabledOn
= true;
}
else {
var date = new Date();
$scope.DisabledOn =
moment(date).format('YYYY/MM/DD');
$scope.disabledDisabledOn
= false;
}
});
},
controller: function($scope, $element) {
//The watch can put here, it will
execute before link function.
$scope.checkedPermanent = false; //ng-check for
Checkbox : 永久有效
$scope.disabledDisabledOn = false; //ng-disable for
Textbox : 停用日期
//Initialize
var date = new Date();
$scope.EnabledOn =
moment(date).format('YYYY/MM/DD');
$scope.DisabledOn =
moment(date).format('YYYY/MM/DD');
}
}
});
|
