- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
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
Tidak bertanggungjawab dan tidak disahkan, berikut adalah beberapa idea:
1. Letakkan addTaskClassBoxDisplay di bawah objek, seperti
scope.obj.addTaskClassBoxDisplay = benar
2. Gunakan mesej
3. Gunakan perkhidmatan
Tiga kaedah di atas juga merupakan cara biasa untuk berkongsi data antara modul Sudut dan boleh disesuaikan dengan senario yang berbeza.
曾经蜡笔没有小新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
Mula-mula buka skop bebas dan gunakan ‘=’ untuk melakukan pengikatan dua hala pada objek skop Seperti dalam contoh di bawah, obj arahan diikat dan dihantar ke objek addTaskClassBoxDisplay
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
Sebelum anda bertanya soalan ini, izinkan saya membetulkan soalan itu.
Anda ingin mengubah suai $skop pengawal. Pertama sekali, arahan yang anda tentukan sendiri ialah skop dalam pengawal. Ia tidak mewarisi atau mencipta skop yang berasingan. Jadi, jika anda mengubah suai atribut di bawah skop arahan anda, anda pasti akan mengubah suai atribut sepadan skop pengawal yang merujuk arahan ini.
Anda mungkin bertanya, mengapa saya tidak mengubah suai skop pengawal semasa saya menulisnya?
Sebabnya ialah anda menggunakan
iElement.on('klik', '#addTaskClass', fungsi(acara) {
scope.addTaskClassBoxDisplay = benar;
Pendengar klik yang anda tentukan sendiri mencetuskan pengubahsuaian atribut skop dan ia tidak akan memberitahu Angular untuk melakukan semakan kotor. Dalam erti kata lain, jika anda mengubah suai addTaskClassBoxDisplay, ia tidak akan bertindak balas pada halaman.
Bagaimana untuk membetulkan ralat ini. Hanya tambah $apply(). Cetuskan pemeriksaan kotor secara manual. Bagaimana cara menggunakannya? Tanya Baidu sendiri.
Sekarang kembali kepada soalan anda. Bagaimana untuk membiarkan arahan mengubah suai skop pengawal.
1. Mari kita mulakan dengan atribut dalaman arahan.
Atribut skop arahan, tiga kaedahnya boleh mengubah suai skop pengawal.
1.skop tidak ditakrifkan atau skop:salah. Ia menggunakan skop pengawal secara langsung
2. skop: benar. Ia adalah skop yang mewarisi pengawal. Pada masa ini, kandungan yang anda ingin ubah suai ditakrifkan sebagai objek.
3. skop: {key:'=key'}. Ia adalah skop bebas. Kaedah pengubahsuaian adalah sama seperti di atas, lebih baik untuk mentakrifkannya sebagai objek
Kemudian beritahu yang lain. Menggunakan iAttrs, takrifkannya sebagai atribut pada arahan.
model var = $parse(iAttrs.addTaskClassBoxDisplay);
iElement.on('klik', '#addTaskClass', fungsi(acara) {
model.assign(skop,benar);
skop.$apply();
2. Gunakan radio. Khususnya Baidu.
3. Gunakan perkhidmatan untuk menghantar.
4. Arahan memanggil $rootScope dan kemudian menjadikan atribut skop pengawal sama dengan atribut $rootScope. (Jangan sekali-kali melakukan ini)
Sudah tiba masanya untuk pergi bekerja, jadi anda boleh menggunakan Baidu kemudian.
世界只因有你2017-05-15 16:55:35
http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/
Asas: http://www.hubwiz.com/course/547c3e3b88dba0087c55b4e5/