Tetapkan variabel lingkup sudut di markup

95

Pertanyaan sederhana: Bagaimana cara menetapkan nilai lingkup dalam html, untuk dibaca oleh pengontrol saya?

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/

Nix
sumber
Anda mungkin lebih baik membuat arahan untuk menangani ini. Sebuah direktif akan merangkum: parameter (s), pengontrol khusus untuk direktif ini, dan template untuk markup 'myMap'.
Ian Mercer
Sebenarnya itulah yang saya lakukan ... hanya mengalami beberapa masalah dengan mengakses $ scope.myVar di pengontrol direktif. Mengapa saya harus menggunakan jam tangan di pengontrol untuk mengakses variabel lingkup?
Nix
1
Mungkin Anda bisa memposting direktif Anda? Lihat "Memahami transklusi dan cakupan" di sini docs.angularjs.org/guide/directive Anda mungkin membutuhkan cakupan: {myVar: '='} dan Anda akan mengatakannya my-var="foo"saat memanggilnya. Perhatikan penggunaan tanda hubung vs. camelCase. Catatan: di foosini dievaluasi , jika Anda tidak ingin penggunaan '@' dalam definisi cakupan untuk mengakses nilai atribut.
Ian Mercer
1
@ Nix Bisakah Anda menjelaskan mengapa nilai perlu diinisialisasi dalam tampilan, bukan di pengontrol Anda? Saya berasumsi Anda sudah tahu itu bukan cara konvensional untuk menginisialisasi nilai (jika tidak, Anda tidak akan bertanya), dan orang lain akan dapat memberi Anda jawaban yang lebih baik jika mereka memahami kasus penggunaan Anda dengan lebih baik.
Sean the Bean
1
@SeantheBean saya masih muda dan bodoh ...;) saya tidak tahu mengapa saya perlu melakukannya. Saya mungkin mencoba meretas sesuatu.
Nix

Jawaban:

139

ng-inittidak berfungsi saat Anda menetapkan variabel di dalam loop. Menggunakan {{myVariable=whatever;""}}

Trailing ""menghentikan ekspresi Angular yang dievaluasi ke teks apa pun.

Kemudian Anda cukup memanggil {{myVariable}}untuk mengeluarkan nilai variabel Anda.

Saya menemukan ini sangat berguna ketika melakukan iterasi beberapa array bersarang dan saya ingin menyimpan info iterasi saya saat ini dalam satu variabel daripada menanyakannya beberapa kali.

Glogo
sumber
1
Meskipun ini berhasil, tampaknya hacky. Artinya, umumnya praktik yang baik menggunakan {{}}hanya untuk mengeluarkan variabel tunggal, bukan untuk menetapkan variabel. Saya akan mengatakan stackoverflow.com/a/16799763/814160 lebih benar (lebih sedikit kode JS dalam tampilan).
Sean the Bean
1
+1 untuk @SeantheBean - Saya telah menguji ini. Tampaknya ada masalah dengan pengontrol anak dan ruang lingkup penetapan variabel di markup. Arahan bekerja untuk tujuan saya dan tampaknya menjadi solusi yang solid.
Paul Carlton
2
Ini sepertinya tidak berfungsi di angular2 / 4 - Bindings tidak dapat berisi tugas
Demodave
1
@Demodave Anda harus menyetel semua variabel pengontrol Anda dalam kode Ketikan, dan menggunakan template hanya untuk menghubungkan Ketikan ke HTML. Template tidak boleh menetapkan variabel.
boxmein
81

ngInit dapat membantu untuk menginisialisasi variabel.

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

contoh jsfiddle

Mark Coleman
sumber
3
Perlu dicatat bahwa mereka tidak merekomendasikan solusi ini untuk aplikasi nyata (tetapi tidak benar-benar menyarankan alternatif): docs.angularjs.org/guide/dev_guide.mvc.understanding_model
Mike Robinson
Ini berhasil untuk saya, namun, pada awalnya variabel masih belum ditentukan di controller. Saya membuat sedikit loop interval: var interval = setInterval (function () {if ($ scope.whatever) {// dostuff clearInterval (interval);}}, 10);
roelleor
19

Buat perintah yang disebut myVardengan

scope : { myVar: '@' }

dan menyebutnya seperti ini:

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

Perhatikan secara khusus referensi kasus unta dalam arahan ke nama tag dengan tanda hubung.

Untuk informasi lebih lanjut, lihat "Memahami Transklusi dan Cakupan" di sini: - http://docs.angularjs.org/guide/directive

Berikut adalah Fiddle yang menunjukkan bagaimana Anda dapat menyalin nilai dari atribut ke variabel cakupan dengan berbagai cara berbeda dalam sebuah perintah.

Ian Mercer
sumber
Saya ingin bisa melakukan banyak hal var-nick='my' var-nick2='test'. Kecuali jika Anda dapat memikirkan cara untuk mengimplementasikannya dengan arahan yang akan saya gunakanng-init
Nix
Anda dapat menyertakan beberapa atribut dalam cakupan, yang Anda butuhkan adalah salah satunya menjadi nama direktif yang ingin Anda jalankan (atau sertakan nama direktif itu juga di html). scope: {varNick: '@', varNick2: '@'}
Ian Mercer
Tapi itu tidak terukur? Saya harus menentukan direktif per variabel?
Nix
Tidak, Anda tidak memerlukan arahan per variabel. Lihatlah biola yang saya tambahkan ke jawabannya.
Ian Mercer
Maaf saya ketinggalan membaca, contoh Anda sempurna, satu-satunya perubahan saya adalah cakupan {'@': '@ "}.
Nix
10

Anda dapat mengatur nilai dari html seperti ini. Saya rasa belum ada solusi langsung dari sudut.

 <div style="visibility: hidden;">{{activeTitle='home'}}</div>
ibsenv
sumber
7
Retas yang bagus ... akan merekomendasikan <div style="display: none">namun.
Roger
3

Anda dapat menggunakan ng-initseperti yang ditunjukkan di bawah ini

<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>

lalu gunakan variabel cakupan lokal di bagian lain:

<div>Total: BW: {{BWCount}}</div>
<div>Total: COLOR: {{ColorCount}}</div>
Mahesh
sumber
Saya suka pendekatan ini; sepertinya tidak terlalu hacky. Satu klarifikasi, ng-init tidak membutuhkan kurung kurawal.
mklbtz
1
$scope.$watch('myVar', function (newValue, oldValue) {
        if (typeof (newValue) !== 'undefined') {
            $scope.someothervar= newValue;
//or get some data
            getData();
        }


    }, true);

Variabel diinisialisasi setelah pengontrol sehingga Anda perlu mengawasinya dan ketika tidak diinisialisasi, gunakan.

Senad Mulaosmanović
sumber
0

Saya suka jawabannya tetapi saya pikir akan lebih baik jika Anda membuat fungsi cakupan global yang memungkinkan Anda mengatur variabel cakupan yang diperlukan.

Jadi di buat globalController

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

dan kemudian dalam file html Anda, sebut saja

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

Ini kemudian akan memungkinkan Anda untuk menggunakan $ scope.myVar di pengontrol Anda masing-masing

Lance N. Solomon
sumber
0

Jika Anda tidak berada dalam satu lingkaran, Anda bisa menggunakan ng-init lain yang bisa Anda gunakan

{{var=foo;""}}

yang "" tidak menampilkan var Anda

Yohann JAFFRES
sumber