angular.js - Ikatan dua hala sudut telah rosak!
伊谢尔伦
伊谢尔伦 2017-05-15 16:52:42
0
4
978

Tampal kod dahulu:

pengawal:

.controller('FoldController', ['$scope', function ($scope){
    $scope.isFolded = true;   //  标志是否折叠的状态
}])

arahan:

.directive('fold', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            // 只要点击其中的内容,让其折叠回去
            element.on('click',function () {  
                scope.isFolded = true;
                element.slideUp();
                console.log(scope);             
            });

            // 折叠的函数                
            function toggleFold(isFold) {

                isFold ? element.slideUp() : element.slideDown();
            }       

            // 监视是否折叠,即controller里定义的标志
            scope.$watch(attrs.fold, function (isFold) {
                toggleFold(isFold);
            });
        }
    }
})

html:

<nav class="navbar navbar-default" ng-controller="FoldController">
    <p class="container">
        <p class="navbar-header">
            <button type="button" class="navbar-toggle"
             ng-click="isFolded=!isFolded">  
            //  主要是这里  点击后toggle折叠的标志

                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a href="#/index" class="navbar-brand">Index {{isFolded}}</a>
                                          // 为了方便测试,我将折叠表示显示出来
        </p>
                                           // 这里用directive控制
        <p class="navbar-collapse collapse" fold="isFolded">
            <ul class="navbar-nav nav">
                <li class="active"><a href="#/index">index</a></li>
                <li><a href="#/about">about</a></li>
                <li><a href="#/contact">contact</a></li>
                <li><a href="#/chatroom">chatroom</a></li>
            </ul>
        </p>

    </p>
</nav>  

Kesan:

Apabila dilipat

Apabila dibuka

Serahan awal selesai, jangkaan saya ialah:

Apabila ia dibentangkan, klik pada kawasan yang dilipat untuk melipatnya semula dan tukar skop.isFold bendera lipat untuk memulihkannya kepada keadaan asalnya,

Soalannya ialah:

Akan ada pepijat, iaitu, saya mengubah suai nilai skop.isFold dan mengesahkan bahawa nilai skop telah ditukar, tetapi nilai asal masih pada halaman, iaitu pengikatan dua hala tidak sah . Lihat gambar di bawah

Dari paparan dalam gambar, kawasan lipatan telah dilipat Output skop.isFold di bawah juga benar, tetapi nilai di bahagian atas halaman adalah palsu . Saya telah mengesahkan pengawal itu betul dengan nilai skop.isFold dalam arahan Hanya halaman ini berlaku secara tidak menentu, yang agak menyedihkan. . .

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

membalas semua(4)
phpcn_u1582

Tambahkan $scope.$apply

pada pengendali acara anda
洪涛
 <p class="navbar-collapse collapse" fold ng-model="isFolded">
            <ul class="navbar-nav nav">
                <li class="active"><a href="#/index">index</a></li>
                <li><a href="#/about">about</a></li>
                <li><a href="#/contact">contact</a></li>
                <li><a href="#/chatroom">chatroom</a></li>
            </ul>
        </p>

js

.directive('fold', function () {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs) {

            // 只要点击其中的内容,让其折叠回去
            element.on('click',function () {  
                scope.isFolded = true;
                element.slideUp();
                scope.$digest();
                console.log(scope);             
            });
   .....
     scope.$watch('isFolded', function (isFold) {
                toggleFold(isFold);
            });

为情所困

Penyelesaiannya ialah:

Selepas mengendalikan elemen dom dan mengubah suai nilai atribut pada skop, skop.$apply mengemas kini paparan

element.on('click', function() {
    pe.isFolded = !scope.isFolded;          
    element.slideUp();
    scope.$apply();
})
黄舟

Malah, ramai yang salah faham, iaitu masih menggunakan pemantauan acara elemnet.on dalam fungsi pautan,
Mengapa tidak menggunakan ngClick dan menulis fungsi scope.click dalam pautan?

Melainkan anda menggunakan pemalam jQuery pihak ketiga

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan