Let's take a look at the following code:
<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>
^ Above: ABC is displayed at the beginning, and XYZ is displayed in 2 seconds. * Internal synchronization is allowed.
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" } } });
^ Above: ABC is displayed, and XYZ is displayed 3 seconds later. * External data can be synchronized internally.
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" } } });
^ Above: Name is displayed, and name is displayed 3 seconds later. * The internal symbol "@" can only get the 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>
^ Above: ABC is displayed at the beginning, and XYZ is displayed in 2 seconds. * Internal synchronization can be performed on the External. Note that the DIV uses the {} expression.
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" } } });
^ Above: ABC is displayed at the beginning, and XYZ is displayed in 2 seconds. * The internal area can be synchronized with the external area. Note that the DIV contains the {} expression.
Angular: direative: Scope | symbol in the Command scope @, =
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
