HTML部分
<index></index>
指令
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);
})
}
};
控制器
angular.module('todoWithAngularApp').controller('IndexCtrl', function ($scope) {
$scope.addTaskClassBoxDisplay = false;
});
怎样才能让指令去修改控制器上的$scope的属性
阿神2017-05-15 16:55:35
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.
曾经蜡笔没有小新2017-05-15 16:55:35
http://stackoverflow.com/questions/14115701/angularjs-create-a-directi...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.13/angular.js"></script>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope) {
$scope.name = true;
});
app.directive('myDirective', function ($compile) {
return {
restrict: 'AE', //attribute or element
scope: {
myDirectiveVar: '=',
//bindAttr: '='
},
template: '<button>' +
'click me</button>',
replace: true,
//require: 'ngModel',
link: function ($scope, elem, attr, ctrl) {
elem.bind('click', function () {
$scope.$apply(function () {
$scope.myDirectiveVar = !$scope.myDirectiveVar;
});
});
console.debug($scope);
//var textField = $('input', elem).attr('ng-model', 'myDirectiveVar');
// $compile(textField)($scope.$parent);
}
};
});
</script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
This scope value <input type="checkbox" ng-model="name">
<my-directive my-directive-var="name"></my-directive>
</body>
</html>
为情所困2017-05-15 16:55:35
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
angular.module('todoWithAngularApp').directive('index', function () {
return {
restrict: 'E',
scope:{
'obj': '=obj'
},
templateUrl: '/scripts/template/index.html',
replace: true,
link: function (scope, iElement, iAttrs) {
}
};
========================
<index obj="addTaskClassBoxDisplay "></index>
伊谢尔伦2017-05-15 16:55:35
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.
世界只因有你2017-05-15 16:55:35
http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/
Basics: http://www.hubwiz.com/course/547c3e3b88dba0087c55b4e5/