Question

我在旧网站上使用angularjs。我有一个问题，如果使用ng-if多个控件。

我有2个图标，当我按下图标A然后用户控制A显示，当我按下图标B时，用户控件B没有显示。

如果我更改div的顺序（以便用户控件B）是第一个，但是然后用户控件A不起作用。所以第二个永远不会...

我尝试删除包含用户控件A的div，然后显示用户控件B.

我已经验证了所有布尔值都是正确的。

我已调试并且可以看到vm.showControlBisVisible为真，我可以看到showControlAreaVisible显示，但不 ascx文件。

最后，除了不同的-tag之外，用户控件具有完全相同的代码。

编辑：如果我删除ng-if属性并输入例如ng-if =“true”那么它就可以了。可能是范围没有更新DOM中的值或类似的东西？如果我只写出{{vm.showControlBisVisible}}，我就会成真。

我的.aspx：

<%@ Register Src="~/MyPage/UserControls/UserControlA.ascx" TagPrefix="MyPage" TagName="ControlA" %>
<%@ Register Src="~/MyPage/UserControls/UserControlB.ascx" TagPrefix="MyPage" TagName="ControlB" %>
<asp:Content ContentPlaceHolderID="cphMainRegion" runat="server">
<div ng-controller="MyController as vm">            

    <section>
        <div class="row">
            <div class="small-12 columns">
                <div class="row">
                    <div class="small-6 columns text-center">
                        <a ng-click="vm.showControlA()">
                            <span class="sprite">
                                <ng-include src="'/MyPage/Assets/svg/icon-A.svg'"></ng-include>
                            </span>
                        </a>
                    </div>

                    <div class="small-6 columns text-center">
                        <a ng-click="vm.showControlB()">
                            <span class="sprite">
                                <ng-include src="'/MyPage/Assets/svg/icon-B.svg'"></ng-include>
                            </span>
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <section class="section--content section--gray" id="content-area" ng-show="vm.showControlAreaVisible">
        <div ng-if="vm.controlAisVisible">     
            <MyPage:ControlA runat="server" />            
        </div>
        <div ng-if="vm.controlBisVisible">      
            <MyPage:ControlB runat="server" />            
        </div>
    </section>
</div>
</asp:Content>

我的控制器：

(function () {
'use strict';

angular
    .module('myApp')
    .controller('MyController', MyController);

MyController.$inject = ['$scope'];

function MyController($scope) {
    var vm = this;

    vm.showControlAreaVisible = false;
    vm.controlAisVisible = false;
    vm.controlBisVisible = false;

    vm.showControlA = showControlA;
    vm.showControlB = showControlB;

    function showControlA() {
        vm.controlBisVisible = false;

        vm.showControlAreaVisible = true;
        vm.controlAisVisible = true;
    }

    function showControlB() {
        vm.controlAisVisible = false;

        vm.showControlAreaVisible = true;
        vm.controlBisVisible = true;
    }

}
})();

多个ascx不会使用ng-if显示

0 个答案: