數據綁定不更新Angular JS

我在AngularJS中真的很新，但我必須使用它創建一個web應用程序，我有一些輸入控制元素（寬度，高度，名稱，描述和顏色）的樣式我的HTML的左側。我曾經隱藏過所有的元素，當用戶點擊它並且一切正常時，現在我開始使用ui-router，如果你點擊'全屏'，它會調用這個html文件。一些輸入工作，除了我定義的初始範圍值。數據綁定不更新Angular JS

我離開了一個沉睡者，所以你可以對發生了什麼有一個想法。

http://plnkr.co/edit/jJTcZQb4lzZeAtNl7YZ1?p=preview

主HTML：

<!doctype html> 
<html lang="en" ng-app="bmiChatbuilder"> 
<head> 
    <meta charset="UTF-8"> 
    <title>ChatBuilder</title> 
    <!-- Adding Bootstrap --> 
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="assets/css/default.css"> 
    <link rel="stylesheet" href="assets/css/colpick.css"> 

</head> 
<body ng-controller="myCtrl"> 

<div > 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-lg-2"> 
       <div> 
        <h3>Select your chat</h3> 
        <a ui-sref="fullscreen">Fullscreen</a> 
        <a ui-sref="chatbanner">ChatBanner</a> 

        <h3>Set your chat options</h3> 
        <label>Name:</label> <br> 
        <input type="text" ng-model="chatName" > <br> 
        <p>{{chatName}}</p> 
        <label>Description:</label> <br> 
        <input type="text" ng-model="chatDes" > <br> 

        <label>Width:</label> <br> 
        <input type="text" ng-model="myWidth"> <br> 

        <label>Height:</label> <br> 
        <input type="text" ng-model="myHeight"> <br> 

        <h3>Style your chat</h3> 
        <label>Header background:</label> <br> 
        <input type="text" class="color {hash:true}" ng-model="myBackground"> <br> 
        <label>Text color header:</label> <br> 
        <input type="text" class="color {hash:true}" ng-model="myColor"> <br> 
        <label>Text color description:</label> <br> 
        <input type="text" class="color {hash:true}" ng-model="myColordes"> <br> 

        <h3>Social media</h3> 
        <p>Want to add social media?</p> 
        <input type="checkbox" ng-model="showsocialpanel"/> 
       <label>Yes</label> 
       <input type="checkbox"/> 
       <label>No</label> <br/> 

       <div ng-show="showsocialpanel"> 
        <h3>Style your footer:</h3> 
        <label>Powered By:</label> <br/> 
        <input type="text" ng-model="poweredBy"/> <br/> 

        <label>Your background footer:</label> <br/> 
        <input type="text" class="color {hash:true}" ng-model="mySocialbg"/> <br/> 


        <h3>Add your social</h3> 
        <input type="checkbox" ng-model="facebookiconshow"/><label>Facebook</label> <br/> 
        <input type="text" ng-show="facebookiconshow" ng-model="facebooklink"placeholder="http://www.facebook.com"/> 
        <br/> 
        <input type="checkbox" ng-model="twittericonshow"/><label>Twitter</label> <br/> 
        <input type="text" ng-show="twittericonshow" ng-model="twitterlink"placeholder="http://www.twitter.com"/> 
        <br/> 
        <input type="checkbox" ng-model="linkediniconshow"/><label>Linkedin</label><br/> 
        <input type="text" ng-show="linkediniconshow" ng-model="linkedinlink"placeholder="http://www.linkedin.com"/> 

       </div> 

      </div> 
     </div> 

     <div class="col-lg-10"> 


      <div ui-view></div> 

     </div> 
    </div> 
</div>

的全屏HTML：

<div id="chat_box" ng-style="{width:myWidth}"> 
     <div id="chat_top"> 
      <div id="chat_avatar"> 

      </div> 
      <div id="chat_header" ng-style="{background: myBackground}"> 
       <h4 ng-style="{color:myColor}">{{chatName}}</h4> 
       <p ng-style="{color:myColordes}">{{chatDes}}</p> 
      </div> 
     </div> 

     <div id="chat_container"> 
      <div id="history_div" ng-style="{height:myHeight}"> 
       <div id="history_mc"> 

       </div> 
      </div> 
     </div> 

     <div id="chat_footer"> 
      <textarea id="input_area" rows="0" 
         type="text" maxlength="75" onkeypress="chatHandler(event)"></textarea> 

      <div class="social_media" ng-show="showsocialpanel" ng-style="{background:mySocialbg}"> 
       <ul> 
        <li ng-show="facebookiconshow"> 
         <a ng-href="{{facebooklink}}" target="_blank"> 
          <img src="assets/img/facebook.png" alt="Facebook Icon"/> 
         </a> 
        </li> 
        <li ng-show="twittericonshow"> 
         <a ng-href="{{twitterlink}}" target="_blank"> 
          <img src="assets/img/twitter.png" alt="Twitter Icon"/> 
         </a> 
        </li> 
        <li ng-show="linkediniconshow"> 
         <a ng-href="{{linkedinlink}}" target="_blank"> 
          <img src="assets/img/linkedin.png" alt="Linkedin Icon"/> 
         </a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div>

的JS：

var bmiChatbuilder = angular.module('bmiChatbuilder', ['ui.router']) 
bmiChatbuilder.config(function($stateProvider, $urlRouterProvider){ 

    // For any unmatched url, send to /route1 
    $urlRouterProvider.otherwise("/") 

    $stateProvider 
     .state('fullscreen', { 
      url: "/fullscreen", 
      templateUrl: "fullscreen.html", 
      controller:"myCtrl" 

     }) 

}) 

bmiChatbuilder.controller('myCtrl', function ($scope) { 

    $scope.chatName = 'Type your text tittle here'; 
    $scope.chatDes = 'Type your description here'; 
    $scope.myWidth = '800px'; 
    $scope.myHeight = '400px'; 
})

在此先感謝您的幫助。

來源

2014-09-30 Alex

路由器使用自己的作用域創建新的myCtrl實例。您可以創建服務以在兩個控制器之間共享數據或爲全屏創建另一種控制器類型。

來源

2014-09-30 23:10:31

對於如何使用工廠方法在同一個控制器上共享數據仍然有點困惑，請您提供一個鏈接來理解這一點。 – Alex 2014-10-01 16:53:24

非常感謝您使用工廠方法解決此問題:) – Alex 2014-10-01 17:41:18

數據綁定不更新Angular JS

回答

相關問題