myApp
.directive('timeInput', function(){
return {
restrict : 'A',
scope : {
ngModel : '='
},
link: function (scope) {
if (scope.ngModel) scope.ngModel = new Date(scope.ngModel);
}
}
});
scope里面的這個ngModel不是指的template中元素里面的ng-model嗎?比如下面這個例子,scope: {name: '@myName',age: '=',changeAge: '&changeMyAge'}里面的三個name,age,changeAge都是中template模板里才引用的,上面的空模板是咋個意思?
<p ng-app="MyApp">
<p class="container" ng-controller="MyController">
<p class="my-info">我的名字是:<span ng-bind="name"></span>
<br/>我的年齡是:<span ng-bind="age"></span>
<br />
</p>
<p class="my-directive" my-directive my-name="{{name}}" age="age" change-my-age="changeAge()"></p>
</p>
</p>
angular.module("MyApp", [])
.controller("MyController", function ($scope) {
$scope.name = "dreamapple";
$scope.age = 20;
$scope.changeAge = function(){
$scope.age = 0;
}
})
.directive("myDirective", function () {
var obj = {
restrict: "AE",
scope: {
name: '@myName',
age: '=',
changeAge: '&changeMyAge'
},
replace: true,
template: "<p class='my-directive'>" +
"<h3>下面部分是我們創(chuàng)建的指令生成的</h3>" +
"我的名字是:<span ng-bind='name'></span><br/>" +
"我的年齡是:<span ng-bind='age'></span><br/>" +
"在這里修改名字:<input type='text' ng-model='name'><br/>" +
"<button ng-click='changeAge()'>修改年齡</button>" +
" </p>"
}
return obj;
});
學(xué)習(xí)是最好的投資!
angular 的指令和組件分的不是很清楚, 這方面vue 分的比較清楚, 組件可以說是定義有另外功能的html標(biāo)簽.你說的不要模板的應(yīng)該是指令, 那些要模板的 我更傾向用認為他是組件