感谢您的支持,我会继续努力的!
打开微信扫一扫,即可进行扫码打赏哦
点我查看本站打赏源码!
Powered by RUNCODEX.COM,学的不仅是技术,更是梦想!!!
<script src="https://code.angularjs.org/angular-1.0.1.min.js"></script>
<div ng-app="MyApp">
<div class="container" ng-controller="MyController">
<div class="my-info">我的名字是1:<span ng-bind="name"></span>
<!-- 使用"ng-bind"防止网络状态不佳时出现没有被赋值表达式 -->
<br/>我的年龄是2:<span ng-bind="age"></span>
</div>
<!-- 使用属性声明指令 -->
<div class="my-directive" my-directive></div>
xxxxxxxxxx
angular.module("MyApp", [])
.controller("MyController", function ($scope) {
//J1 这里我们在作用域里初始化两个变量
$scope.name = "dreamapple";
$scope.age = 20;
//J2 创建一个方法,修改我们创建的对象的年龄
$scope.changeAge = function () {
$scope.age = 22;
}
})
//J3 创建我们的指令,指令名字为"myDirective"
.directive("myDirective", function () {
var obj = {
//J4 指令的声明模式为 "AE" 属性和元素
restrict: "AE",
//J5 指令继承父作用域的属性和方法
scope: false,
replace: true,
template: "<div class='my-directive'>" +
"<h3>下面部分是我们创建的指令生成的</h3>" +
"我的名字是:<span ng-bind='name'></span><br/>" +
"我的年龄是:<span ng-bind='age'></span><br/>" +
"<input type='text' ng-model='name'>"+
" </div>"
return obj;
});
div{
padding: 6px;
div.container {
border: 1px solid black;
div.my-info {
border: 1px solid blue;
div.my-directive{
border: 1px solid green;