不显示如预期angularjs NG-秀 [英] angularjs ng-show not displaying as expected

问题描述

我可能越来越困惑与MVC和angularjs，试图把一个布尔值来控制范围的变量隐藏分区。

我有一个包含此列表html页面：

 ＆LT;＆TBODY GT; {{isAuthorised}}
            ＆LT; TR NG重复=calendarEvent中的项目ID =_事件{{calendarEvent.Id}}＆GT;
                <td><strong>{{calendarEvent.EventTitle}}</strong><br/>{{calendarEvent.EventDescription}}</td>
                ＆所述; TD＆GT; {{calendarEvent.EventDate |日期：mediumDate}}＆LT; / TD＆GT;
                ＆所述; TD＆GT;＆下; IMG SRC ={{calendarEvent.ThumbnailUrl}}ALT =宽度=100/＆GT;＆下; / TD＆GT;
                ＆所述; TD＆GT;
                    ＆LT; D​​IV NG秀=isAuthorised＆GT;
                        ＆LT; A HREF =＃/编辑/ {{calendarEvent.Id}}＆GT;＆LT; I类=glyphicon glyphicon编辑＆GT;＆LT; I＆GT /;＆LT; / A＆GT;
                        ＆LT;一个NG点击=删除（）＆GT;＆LT; I类=glyphicon glyphicon  - 删除＆GT;＆LT; / I＆GT;＆LT; / A＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆LT; / TBODY＆GT;
 

我目前输出值来揣摩到底是怎么回事。所以，如果我打这个页面的值设置在div显示我的编辑和删除，我不想要的按钮。范围变量的值显示为{}

我有这个app.js code：

  VAR的ListCtrl =功能（$范围，$位置，CalendarEvent，SharedService）{    **的东西很多不相干删除**        $ scope.isAuthorised = SharedService.get（）;
    };
 

通过被设定的值（在共享服务）的单独的HTML内容部分我的登录控制器

  VAR LoginCtrl =功能（$范围，$位置$ HTTP，SharedService）{    $ scope.login =功能（）{
        $ http.get（/ AuthorisedUser / IsValidUser /+ $ scope.item.ValidEmailAddress +/）
        .success（功能（结果）{
            变种isAuthorised = result.toLowerCase（）;
            如果（isAuthorised）{
                SharedService.set（isAuthorised）;
                $ location.path（'/'）;
            }其他{
                警报（你没有权力！'）;
            }        }）
        .error（函数（）{
             警报（电子邮件不能在这个时候进行验证'）;
        }）;    }
};
 

结果是一个MVC方法返回一个布尔类型。我想，也许我需要的布尔为小写因为JavaScript想更好转化，但也许这就是做一些隐式转换为字符串什么？我不知道我需要什么我的列表中的HTML改为正确显示该div只有当值为true。我是从有限的AngularJS理解.NET背景的。

价值似乎被设置，因为如果我把我看到一个有效的电子邮件地址

真正

在HTML页面里的范围变量。

这似乎在Chrome马上开始工作 - 但现在不工作，只是表示应该被隐藏的东东

。

对不起忘了，包括共享服务：

  EventsCalendarApp.factory（'SharedService'，函数（）{
    变种savedData = {}    功能集（数据）{
        savedData =数据;
    }    函数的get（）{
        返回savedData;
    }    返回{
        设置：设置，
        得到：得到
    }
}）;
 

解决方案

我觉得一切都在你的控制器，服务可以简化和UI如果你的服务处理对象引用，而不是一个布尔值（这是一个原始的）。

您服务：

  EventsCalendarApp.factory（'SharedService'，函数（）{
    VAR savedData = {isAuthorised：假}    功能集（数据）{
        //覆盖与数据的属性savedData性能，
        //但是preserves参考
        angular.copy（数据，savedData）;
    }
    功能setAuthorised（授权）{
        savedData.isAuthorised =授权;
    }    函数的get（）{
        返回savedData;
    }    返回{
        设置：设置，
        得到：得到，
        setAuthorised：setAuthorised
    }
}）;
 

您登录控制器：

  VAR LoginCtrl =功能（$范围，$位置$ HTTP，SharedService）{    //辅助函数，以确定是否含有STR真
    功能parseBoolean（STR）{
          返回/^true$/i.test(str）;
    }
    $ scope.login =功能（）{
        $ http.get（/ AuthorisedUser / IsValidUser /+ $ scope.item.ValidEmailAddress +/）
        .success（功能（结果）{
            VAR isAuthorised = parseBoolean（结果）;
            如果（isAuthorised）{
                SharedService.set（{isAuthorised：isAuthorised}）;
                // 要么
                SharedService.setAuthorised（isAuthorised）;                $ location.path（'/'）;
            }其他{
                警报（你没有权力！'）;
            }        }）
        .error（函数（）{
             警报（电子邮件不能在这个时候进行验证'）;
        }）;    }
};
 

您列表控制器：

  VAR的ListCtrl =功能（$范围，$位置，CalendarEvent，SharedService）{    **的东西很多不相干删除**        $ scope.savedData = SharedService.get（）;
    };
 

HTML

 ＆LT;＆TBODY GT; {{savedData.isAuthorised}}
            ＆LT; TR NG重复=calendarEvent中的项目ID =_事件{{calendarEvent.Id}}＆GT;
                <td><strong>{{calendarEvent.EventTitle}}</strong><br/>{{calendarEvent.EventDescription}}</td>
                ＆所述; TD＆GT; {{calendarEvent.EventDate |日期：mediumDate}}＆LT; / TD＆GT;
                ＆所述; TD＆GT;＆下; IMG纳克-SRC ={{calendarEvent.ThumbnailUrl}}ALT =宽度=100/＆GT;＆下; / TD＆GT;
                ＆所述; TD＆GT;
                    ＆LT; D​​IV NG秀=savedData.isAuthorised＆GT;
                        ＆LT; A HREF =＃/编辑/ {{calendarEvent.Id}}＆GT;＆LT; I类=glyphicon glyphicon编辑＆GT;＆LT; I＆GT /;＆LT; / A＆GT;
                        ＆LT;一个NG点击=删除（）＆GT;＆LT; I类=glyphicon glyphicon  - 删除＆GT;＆LT; / I＆GT;＆LT; / A＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆LT; / TBODY＆GT;
 

当您使用对象引用，那么任何的变化从内部服务会自动传播到视图的参考;为尽到一个控制器内所发生的基准任何更改。有这背后没有真正的魔术 - 它们会自动更新，因为它们是同一个参考。相反，当你使用原语，则该值的拷贝被传来传去，它变得更具挑战性，让他们都同步。

  

请注意：在一个不相关的音符，你应该使用NG-SRC为具有约束力的前pressions图像的URL。这确保了前pression评估和渲染后的图像的URL仅由浏览器下载

I'm probably getting confused with mvc and angularjs and trying to set a boolean to control a scope variable to hide a div.

I have a list html page that includes this:

 <tbody>{{isAuthorised}}
            <tr ng-repeat="calendarEvent in items" id="event_{{calendarEvent.Id}}">
                <td><strong>{{calendarEvent.EventTitle}}</strong><br/>{{calendarEvent.EventDescription}}</td>
                <td>{{calendarEvent.EventDate | date:mediumDate}}</td>
                <td><img src="{{calendarEvent.ThumbnailUrl}}" alt="" width="100" /></td>
                <td>
                    <div ng-show="isAuthorised"> 
                        <a href="#/edit/{{calendarEvent.Id}}"><i class="glyphicon glyphicon-edit"></i></a>
                        <a ng-click="delete()"><i class="glyphicon glyphicon-remove"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>

I'm outputting the value currently to try to figure out what is going on. So if I hit this page with setting the value the div shows my edit and delete buttons which I don't want. The value of the scope variable displays as {}.

I have this app.js code:

 var ListCtrl = function ($scope, $location, CalendarEvent, SharedService) {

    ** lots of stuff removed as irrelevant **

        $scope.isAuthorised = SharedService.get();
    };

My login controller via a separate html content section that is setting the value (in the shared service)

var LoginCtrl = function ($scope, $location, $http, SharedService) {

    $scope.login = function () {
        $http.get("/AuthorisedUser/IsValidUser/" + $scope.item.ValidEmailAddress + "/")
        .success(function (result) {
            var isAuthorised = result.toLowerCase();
            if (isAuthorised) {
                SharedService.set(isAuthorised);
                $location.path('/');
            } else {
                alert('you do not have the power!');
            }

        })
        .error(function() {
             alert('Email could not be Validated at this time');
        });

    }
};

the result is an MVC method returning a bool type. I thought maybe I needed to convert the bool to lower case because javascript would like it better, but maybe that's doing some implicit conversion to a string or something?! I'm not sure what I need to change in my list html to properly show that div only when the value is true. I'm coming from a .NET background with limited AngularJS understanding.

The value seems to being set, because if I put in a valid email address I'm seeing

true

in the html page where the scope variable is.

It seemed to work once in Chrome - but now that's not working, and just showing the stuff that should be hidden.

Sorry forgot to include the shared service:

EventsCalendarApp.factory('SharedService', function() {
    var savedData = {}

    function set(data) {
        savedData = data;
    }

    function get() {
        return savedData;
    }

    return {
        set: set,
        get: get
    }
});

解决方案

I think everything would be simplified in your controller, service, and UI if your service dealt with object references rather than a Boolean value (which is a primitive).

Your service:

EventsCalendarApp.factory('SharedService', function() {
    var savedData = { isAuthorised: false }

    function set(data) {
        // overwrites savedData properties with data's properties, 
        // but preserves the reference
        angular.copy(data, savedData);
    }
    function setAuthorised(authorised) {
        savedData.isAuthorised = authorised;
    }

    function get() {
        return savedData;
    }

    return {
        set: set,
        get: get,
        setAuthorised: setAuthorised
    }
});

Your Login controller:

var LoginCtrl = function ($scope, $location, $http, SharedService) {

    // helper function to determine if str contains 'true'
    function parseBoolean(str) {
          return /^true$/i.test(str);
    }        
    $scope.login = function () {
        $http.get("/AuthorisedUser/IsValidUser/" + $scope.item.ValidEmailAddress + "/")
        .success(function (result) {
            var isAuthorised = parseBoolean(result);
            if (isAuthorised) {
                SharedService.set({ isAuthorised: isAuthorised });
                // OR
                SharedService.setAuthorised(isAuthorised);

                $location.path('/');
            } else {
                alert('you do not have the power!');
            }

        })
        .error(function() {
             alert('Email could not be Validated at this time');
        });

    }
};

Your List Controller:

 var ListCtrl = function ($scope, $location, CalendarEvent, SharedService) {

    ** lots of stuff removed as irrelevant **

        $scope.savedData = SharedService.get();
    };

HTML:

<tbody>{{savedData.isAuthorised}}
            <tr ng-repeat="calendarEvent in items" id="event_{{calendarEvent.Id}}">
                <td><strong>{{calendarEvent.EventTitle}}</strong><br/>{{calendarEvent.EventDescription}}</td>
                <td>{{calendarEvent.EventDate | date:mediumDate}}</td>
                <td><img ng-src="{{calendarEvent.ThumbnailUrl}}" alt="" width="100" /></td>
                <td>
                    <div ng-show="savedData.isAuthorised"> 
                        <a href="#/edit/{{calendarEvent.Id}}"><i class="glyphicon glyphicon-edit"></i></a>
                        <a ng-click="delete()"><i class="glyphicon glyphicon-remove"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>

When you use object references, then any changes to the reference from within your service is automatically propagated to the views; as do any changes to the reference that happen inside a controller. There is no real magic behind this - they are automatically updated because they are the same reference. In contrast, when you use primitives, then a copy of the value is passed around, and it becomes more challenging to keep them all in synch.

NOTE: on an unrelated note, you should use ng-src for image URLs that are binding expressions. This ensures that the image URL is only downloaded by the browser after the expression is evaluated and rendered.

这篇关于不显示如预期angularjs NG-秀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！