码迷,mamicode.com
首页 > 其他好文 > 详细

angular : direative : scope | 指令scope里的符号@,=

时间:2014-09-04 16:30:59      阅读:313      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   os   io   使用   java   ar   div   

 先看看以下的代码

<body ng-app="app" ng-controller="ctrl">
    <dir myname="name"></dir>
    <script src="js/angular.js"></script>
    <script>
        var app = angular.module("app", []);
        app.controller("ctrl", function ($scope, $timeout) {
            $scope.name = "ABC";
            $timeout(function () {
                $scope.name = "XYZ";
                //console.log("ctrl :" + $scope.name);
            }, 2000);
        });
        app.directive("dir", function ($timeout) {
            return {
                restrict: "E",
                template: "<div>{{dirName}}</div>",
                link: function (scope, elem, attr) {
                    $timeout(function () {
                        //scope.name = "XYZ";
                        console.log("dir :" + scope.dirName);
                    }, 3000);
                },
                scope: {
                    dirName: "=myname"
                }
            }
        });
    </script>
</body>

以上 ^ : 一开始会显示ABC,2秒后会显示XYZ。*外面可以同步内部

 

        app.controller("ctrl", function ($scope, $timeout) {
            $scope.name = "ABC";
            $timeout(function () {
                //$scope.name = "XYZ";
                //console.log("ctrl :" + $scope.name);
            }, 2000);
        });
        app.directive("dir", function ($timeout) {
            return {
                restrict: "E",
                template: "<div>{{dirName}}</div>",
                link: function (scope, elem, attr) {
                    $timeout(function () {
                        scope.dirName = "XYZ";
                        console.log("dir :" + scope.dirName);
                    }, 3000);
                },
                scope: {
                    dirName: "=myname"
                }
            }
        });

以上^ : 开始显示ABC,3秒后显示XYZ。*内部可以同步外部

 

        app.controller("ctrl", function ($scope, $timeout) {
            $scope.name = "ABC";
            $timeout(function () {
                $scope.name = "XYZ";
                //console.log("ctrl :" + $scope.name);
            }, 2000);
        });
        app.directive("dir", function ($timeout) {
            return {
                restrict: "E",
                template: "<div>{{dirName}}</div>",
                link: function (scope, elem, attr) {
                    $timeout(function () {
                        //scope.dirName = "XYZ";
                        console.log("dir :" + scope.dirName);
                    }, 3000);
                },
                scope: {
                    dirName: "@myname"
                }
            }
        });

以上^ : 开始显示name,3秒后显示name。*内部的符号“@”只能拿到string

 

<body ng-app="app" ng-controller="ctrl">
    <dir myname="{{name}}"></dir>
    <script src="js/angular.js"></script>
    <script>
        var app = angular.module("app", []);
        app.controller("ctrl", function ($scope, $timeout) {
            $scope.name = "ABC";
            $timeout(function () {
                $scope.name = "XYZ";
                //console.log("ctrl :" + $scope.name);
            }, 2000);
        });
        app.directive("dir", function ($timeout) {
            return {
                restrict: "E",
                template: "<div>{{dirName}}</div>",
                link: function (scope, elem, attr) {
                    $timeout(function () {
                        //scope.dirName = "XYZ";
                        console.log("dir :" + scope.dirName);
                    }, 3000);
                },
                scope: {
                    dirName: "@myname"
                }
            }
        });
    </script>
</body>

以上 ^ : 一开始会显示ABC,2秒后会显示XYZ。*外面可以同步内部,同时注意div里是使用{{}}的表达式

 

        app.controller("ctrl", function ($scope, $timeout) {
            $scope.name = "ABC";
            $timeout(function () {
                //$scope.name = "XYZ";
                //console.log("ctrl :" + $scope.name);
            }, 2000);
        });
        app.directive("dir", function ($timeout) {
            return {
                restrict: "E",
                template: "<div>{{dirName}}</div>",
                link: function (scope, elem, attr) {
                    $timeout(function () {
                        scope.dirName = "XYZ";
                        console.log("dir :" + scope.dirName);
                    }, 3000);
                },
                scope: {
                    dirName: "@myname"
                }
            }
        });

以上 ^ : 一开始会显示ABC,2秒后会显示XYZ。*内面可以同步外部,同时注意div里是使用{{}}的表达式

angular : direative : scope | 指令scope里的符号@,=

标签:style   blog   color   os   io   使用   java   ar   div   

原文地址:http://www.cnblogs.com/stooges/p/3956112.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!