masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
angular.js - Angular控制器和指令的交互
淡淡烟草味
淡淡烟草味 2017-05-15 16:53:35
0
6
727

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的属性

淡淡烟草味
淡淡烟草味

membalas semua(6)
阿神
阿神2017-05-15 16:55:35 Tingkat 6

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.

Suka +0
Tambah Balasan
曾经蜡笔没有小新
曾经蜡笔没有小新2017-05-15 16:55:35 Tingkat 5

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>
Suka +0
Tambah Balasan
为情所困
为情所困2017-05-15 16:55:35 Tingkat 4

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>
Suka +0
Tambah Balasan
伊谢尔伦
伊谢尔伦2017-05-15 16:55:35 Tingkat 3

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.

Suka +0
Tambah Balasan
世界只因有你
世界只因有你2017-05-15 16:55:35 Tingkat 2

http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/
Asas: http://www.hubwiz.com/course/547c3e3b88dba0087c55b4e5/

Suka +0
Tambah Balasan
漂亮男人
漂亮男人2017-05-15 16:55:35 Tingkat 1

Soalan yang sangat bagus, saya nak tanya juga

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan