HTML part
<index></index>
Commands
angular.module('todoWithAngularApp').directive('index', function () {
return {
restrict: 'E',
templateUrl: '/scripts/template/index.html',
replace: true,
link: function (scope, iElement, iAttrs) {
console.log(scope);
console.log(iElement);
console.log(iAttrs);
iElement.on('click', '#addTaskClass', function(event) {
scope.addTaskClassBoxDisplay = true;
console.log(scope.addTaskClassBoxDisplay);
})
}
};
Controller
angular.module('todoWithAngularApp').controller('IndexCtrl', function ($scope) {
$scope.addTaskClassBoxDisplay = false;
});
How to let the command modify the $scope attribute on the controller
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Irresponsible and unverified, here are some ideas:
1. Place addTaskClassBoxDisplay under the object, for example
scope.obj.addTaskClassBoxDisplay = true
2. Use messages
3. Use service
The above three methods are also common ways to share data between modules in Angular, and can be adapted to different scenarios.
http://stackoverflow.com/questions/14115701/angularjs-create-a-directi...
First open an independent scope and use ‘=’ to perform two-way binding on an object of the scope. As in the example below, the obj of the instruction is bound and transmitted to the addTaskClassBoxDisplay object
Before you ask this question, let me correct the question.
You want to modify the $scope of the controller. First of all, the instruction you define yourself is the scope in the controller. It does not inherit or create a separate scope. So if you modify the attributes under the scope of your instruction, you will definitely modify the corresponding attributes of the scope of the controller that references this instruction.
You may ask, why did I not modify the scope of the controller when I wrote it?
The reason is that you used
iElement.on('click', '#addTaskClass', function(event) {
scope.addTaskClassBoxDisplay = true;
The click listener you define yourself triggers modification of the scope attribute, and it will not notify Angular to perform dirty checking. In other words, if you modify addTaskClassBoxDisplay, it will not respond on the page.
How to fix this error. Just add $apply(). Manually trigger dirty checks. How to use it? Ask Baidu by yourself.
Now back to your question. How to let directive modify controller's scope.
1. Let’s start with the directive’s internal attributes.
The scope attribute of the directive, its three methods can modify the scope of the controller.
1.scope is not defined or scope:false. It uses the controller’s scope directly
2. scope: true. It is the scope that inherits the controller. At this time, the content you want to modify is best defined as an object.
3. scope: {key:'=key'}. It is an independent scope. The modification method is the same as above, it is best to define it as an object
Then tell another one. Using iAttrs, define it as an attribute on the directive.
var model = $parse(iAttrs.addTaskClassBoxDisplay);
iElement.on('click', '#addTaskClass', function(event) {
model.assign(scope,true);
scope.$apply();
2. Use radio. Specifically Baidu.
3. Use service to deliver.
4. The instruction calls $rootScope and then makes the controller's scope attribute equal to the $rootScope attribute. (Don’t do this)
It’s time to go to work, so you can use Baidu later.
http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/
Basics: http://www.hubwiz.com/course/547c3e3b88dba0087c55b4e5/
Very good question, I want to ask it too