ตั้งค่าตัวแปรขอบเขตเชิงมุมในมาร์กอัป

คำถามง่ายๆ: ฉันจะตั้งค่าขอบเขตใน html เพื่อให้คอนโทรลเลอร์ของฉันอ่านได้อย่างไร

var app = angular.module('app', []);

app.controller('MyController', function($scope) {
  console.log($scope.myVar);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller="MyController" app-myVar="test">
    {{myVar}}
  </div>
</div>

JSFiddle: http://jsfiddle.net/ncapito/YdQcX/

ng-initไม่ทำงานเมื่อคุณกำหนดตัวแปรภายในลูป ใช้ {{myVariable=whatever;""}}

การต่อท้าย""จะหยุดนิพจน์เชิงมุมที่ถูกประเมินเป็นข้อความใด ๆ

จากนั้นคุณสามารถเรียก{{myVariable}}ให้แสดงค่าตัวแปรของคุณได้

ฉันพบว่าสิ่งนี้มีประโยชน์มากเมื่อทำซ้ำอาร์เรย์ที่ซ้อนกันหลายอาร์เรย์และฉันต้องการเก็บข้อมูลการทำซ้ำปัจจุบันไว้ในตัวแปรเดียวแทนที่จะค้นหาหลาย ๆ ครั้ง

ngInit สามารถช่วยในการเริ่มต้นตัวแปร

<div ng-app='app'>
    <div ng-controller="MyController" ng-init="myVar='test'">
        {{myVar}}
    </div>
</div>

ตัวอย่าง jsfiddle

สร้างคำสั่งที่เรียกmyVarด้วย

scope : { myVar: '@' }

และเรียกแบบนี้ว่า

<div name="my_map" my-var="Richmond,VA">

โดยเฉพาะอย่างยิ่งการอ้างอิงกรณีอูฐในคำสั่งไปยังชื่อแท็กยัติภังค์

สำหรับข้อมูลเพิ่มเติมโปรดดู "การทำความเข้าใจการเปลี่ยนและขอบเขต" ที่นี่: - http://docs.angularjs.org/guide/directive

นี่คือ Fiddleที่แสดงวิธีการคัดลอกค่าจากแอตทริบิวต์ไปยังตัวแปรขอบเขตในรูปแบบต่างๆภายในคำสั่ง

คุณสามารถกำหนดค่าจาก html เช่นนี้ ฉันไม่คิดว่าจะมีวิธีแก้ปัญหาโดยตรงจากเชิงมุม

 <div style="visibility: hidden;">{{activeTitle='home'}}</div>

คุณสามารถใช้ได้ng-initตามที่แสดงด้านล่าง

<div class="TotalForm">
  <label>B/W Print Total</label>
  <div ng-init="{{BWCount=(oMachineAccounts|sumByKey:'BWCOUNT')}}">{{BWCount}}</div>
</div>
<div class="TotalForm">
  <label>Color Print Total</label>
  <div ng-init="{{ColorCount=(oMachineAccounts|sumByKey:'COLORCOUNT')}}">{{ColorCount}}</div>
</div>

จากนั้นใช้ตัวแปรขอบเขตโลคัลในส่วนอื่น ๆ :

<div>Total: BW: {{BWCount}}</div>
<div>Total: COLOR: {{ColorCount}}</div>

$scope.$watch('myVar', function (newValue, oldValue) {
        if (typeof (newValue) !== 'undefined') {
            $scope.someothervar= newValue;
//or get some data
            getData();
        }


    }, true);

ตัวแปรเริ่มต้นหลังจากตัวควบคุมดังนั้นคุณต้องเฝ้าระวังและเมื่อไม่ได้เริ่มต้นการใช้งาน

ฉันชอบคำตอบ แต่ฉันคิดว่ามันจะดีกว่าถ้าคุณสร้างฟังก์ชันขอบเขตส่วนกลางที่จะช่วยให้คุณตั้งค่าตัวแปรขอบเขตที่ต้องการได้

ดังนั้นใน globalController สร้าง

$scope.setScopeVariable = function(variable, value){
    $scope[variable] = value;
}

จากนั้นในไฟล์ html ของคุณเรียกมันว่า

{{setScopeVariable('myVar', 'whatever')}}

จากนั้นจะอนุญาตให้คุณใช้ $ scope.myVar ในตัวควบคุมของคุณ

หากคุณไม่อยู่ในวงคุณสามารถใช้ ng-init อื่นที่คุณสามารถใช้ได้

{{var=foo;""}}

เครื่องหมาย "" ไม่แสดงตัวแปรของคุณ

คุณสามารถใช้คำสั่ง ng-value ในช่องที่ซ่อนอยู่ด้านล่าง: -

<input type="hidden" ng-value="myScopeVar = someValue"/>

ซึ่งจะตั้งค่าของตัวแปรขอบเขต (myScopeVar) เป็น "someValue"