首页 > 代码库 > angular : direative : scope | 指令scope里的符号@，=
angular : direative : scope | 指令scope里的符号@，=
先看看以下的代码
<body ng-app="app" ng-controller="ctrl"> <dir myname="name"></dir> <script src="http://www.mamicode.com/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="http://www.mamicode.com/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里的符号@，=
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。