Javascript 获取切换元素的状态

Javascript 获取切换元素的状态,javascript,toggle,angular-ui,Javascript,Toggle,Angular Ui,我正在用angularui构建一个应用程序。我有一个跨度,其中包含一个图像,当用户点击save时,我需要打开和关闭该图像,并保存状态。如何获取此元素的切换状态 这是我的密码: <div class="scrollable" ng-controller="UpdateProspectCtrl"> <div class="scrollable-content section"> <form role="form" ng-submit='updateProspec

我正在用angularui构建一个应用程序。我有一个跨度,其中包含一个图像,当用户点击save时,我需要打开和关闭该图像,并保存状态。如何获取此元素的切换状态

这是我的密码:

<div class="scrollable" ng-controller="UpdateProspectCtrl">
<div class="scrollable-content section">
    <form role="form" ng-submit='updateProspect()'>
        <fieldset>
            <p ui-state="pinProspect" ng-model="pinprospectpara"
               ui-class="{'text-primary': pinProspect}"
               class="text-default">

                <span ng-model="pinprospect" style="font-size: 40px; display: block;"
                   class="fa fa-paperclip" ui-toggle='pinProspect'
                   ui-class="{'active': pinProspect}" ng-click="setPinned()"></span>
            </p>
        </fieldset><hr>
        <button class="btn btn-primary btn-block">
            Save
        </button>
    </form>
</div>

此外,即使我给它一个ng模型,我也无法在我的控制器中访问它。我可以访问页面的所有剩余元素,除了这个span及其container p标记。可能有什么问题?

您不应该将ng模型指令绑定到输入和文本区域以外的任何其他对象,它并不用于范围,如果您想显示模型使用- {{updateProspectPin}}

ng click指令应负责切换值

如果你想保存状态,你应该打开一个angular服务,它是一个单例,并将保存的状态存储在那里

新服务-

function pinnedStateService (localStorageService) {
    var service = this;

    service.pinState = { value: getPinStateFromLocalStorage()}; 

    service.toggleState = function () {
      service.pinState.value = !service.pinState.value;
      localStorageService.set("pinItem", this.pinState.value);// i am not sure this is the correct syntax
    }

    function getPinStateFromLocalStorage() {
        return localStorageService.get("pinItem"); // i am not sure this is the correct syntax
    }
}

function controller(pinnedStateService){
  $scope.pinState = pinnedStateService.pinState;
  $scope.toggleState = pinnedStateService.toggleState; // binding function to scope so you can use it on the view
}
认为—

 <element ui-class="{'active': pinState}" />


祝你好运

你能发布更多的代码吗?还有角度控制器?@messerbill:我已经用更详细的html代码和控制器更新了这个问题。谢谢!我可以保存状态,但如何在UI元素中再次设置状态?例如,如果我将状态设置为selected,我可以保存它,但下次加载页面时,我希望显示已选择的图像。我怎样才能做到?你是说重新加载一整页?如果您将此值保存到数据库或浏览器localstorage/Cookies,则可以使用此插件与浏览器的localstorage进行角度集成,以保存所需的任何信息,在您的情况下,pinnedState将保留,只要用户擦除其浏览器临时数据,我想我在这里不能很好地解释我自己。我可以将状态保存在localStorage中。但是,当我重新加载当前页面时,我希望将UI元素设置为启用。这是我无法实现的。我使用ui class=“{'active':pinProspect}”将pinted to状态设置为active或inactive。但是,我无法访问$scope.pinProspect。我想将此变量设置为true,以显示已选择的UI元素。我是如何做到这一点的?我编辑了代码,再看一看,我认为它应该适合你。让我知道
 <element ui-class="{'active': pinState}" />