Cách đặt thuộc tính phạm vi bằng ng-init?

Tôi đang cố gắng đặt giá trị của thuộc tính $ scope bằng cách sử dụng ng-init và tôi không thể truy cập vào giá trị đó trong javascript của trình điều khiển. Tôi đang làm gì sai? Đây là một fiddle: http://jsfiddle.net/uce3H/Cách đặt thuộc tính phạm vi bằng ng-init?

đánh dấu:

<body ng-app> 
    <div ng-controller="testController" > 
     <input type="hidden" id="testInput" ng-model="testInput" ng-init="testInput='value'" /> 
    </div> 
    {{ testInput }} 
</body>

javascript:

var testController = function ($scope) { 
    console.log($scope.testInput); 
}

Trong javascrippt, $ scope.testInput là undefined. Không nên là 'giá trị'?

Nguồn

2013-11-14 TimH

Bạn đang cố gắng đọc giá trị đã đặt trước khi Góc được thực hiện chỉ định.

Demo:

var testController = function ($scope, $timeout) { 
    console.log('test'); 
    $timeout(function(){ 
     console.log($scope.testInput); 
    },1000); 
}

Lý tưởng nhất là bạn nên sử dụng $watch theo đề nghị của @Beterraba để thoát khỏi bộ đếm thời gian:

var testController = function ($scope) { 
    console.log('test'); 
    $scope.$watch("testInput", function(){ 
     console.log($scope.testInput); 
    }); 
}

Nguồn

2013-11-14 15:30:14 AlwaysALearner

Bạn problably sẽ muốn sử dụng '$ phạm vi. $ Watch' trong trường hợp này. – Beterraba

@Beterraba Yep. Bạn đúng. Tôi đã cập nhật câu trả lời của mình. Cảm ơn. – AlwaysALearner

Bạn cũng có thể sử dụng '$ watch' nhưng hãy nhớ rằng bộ điều khiển sẽ chạy nhiều lần để cho dù bạn sử dụng hết thời gian chờ hoặc xem, nó có thể chạy nhiều lần. –

Giống như CodeHater nói rằng bạn đang truy cập vào các biến trước khi nó được thiết lập.

Để khắc phục điều này, hãy chuyển chỉ thị ng-init tới div đầu tiên.

<body ng-app> 
    <div ng-controller="testController" ng-init="testInput='value'"> 
     <input type="hidden" id="testInput" ng-model="testInput" /> 
     {{ testInput }} 
    </div> 
</body>

Điều đó sẽ hiệu quả!

Nguồn

2013-11-14 15:41:36 eXaminator

{{testInput}} của bạn nằm ngoài phạm vi của bộ điều khiển và rất có thể vẫn là rỗng:/xem xét di chuyển nó lên div – Mutmatt

Yep, @Mutmatt đó là lỗi đánh máy. Tôi mã hóa nó trực tiếp ở đây mà không cần phải suy nghĩ nhiều. Xin lỗi – monzonj

HTML:

<body ng-app="App"> 
    <div ng-controller="testController" > 
     <input type="hidden" id="testInput" ng-model="testInput" ng-init="testInput=123" /> 
    </div> 
    {{ testInput }} 
</body>

JS:

angular.module('App', []); 

testController = function ($scope) { 
    console.log('test'); 
    $scope.$watch('testInput', testShow, true); 
    function testShow() { 
     console.log($scope.testInput); 
    } 
}

Fiddle

Nguồn

2013-11-14 15:46:13 lukpaw

Xin lỗi vì câu trả lời của tôi (quá muộn) Tôi bây giờ thấy rằng @Beterraba là lần đầu tiên. Chúc mừng! – lukpaw

Chỉ cần thiết lập ng-init như một hàm. Bạn không cần phải sử dụng đồng hồ.

<body ng-controller="MainCtrl" ng-init="init()"> 
    <div ng-init="init('Blah')">{{ testInput }}</div> 
</body> 

app.controller('MainCtrl', ['$scope', function ($scope) { 
    $scope.testInput = null; 
    $scope.init = function(value) { 
    $scope.testInput= value; 
    } 
}]);

Đây là một ví dụ.

Plunker

Nguồn

2013-11-14 15:56:02 Rob

Tôi thích điều này, không thể chờ đợi để dùng thử. Tôi đã gặp phải một số sự cố khi sử dụng chức năng đồng hồ $. –

Giải pháp hữu ích siêu hữu ích! – kpup

Đây là gợi ý tốt nhất –

-1

tôi đã có một số rắc rối với $scope.$watch nhưng sau rất nhiều thử nghiệm tôi phát hiện ra rằng data-ng-model="User.UserName" tôi bị tác động nặng được đặt tên và sau khi tôi thay đổi nó để data-ng-model="UserName" tất cả mọi thứ làm việc tốt. Tôi hy vọng nó là . trong tên gây ra vấn đề.

Nguồn

2016-05-19 13:08:44 ewil

Cố Bộ luật này

var app = angular.module('myapp', []); 
    app.controller('testController', function ($scope, $http) { 
     $scope.init = function(){   
     alert($scope.testInput); 
    };});

<body ng-app="myapp"> 
 
     <div ng-controller='testController' data-ng-init="testInput='value'; init();" class="col-sm-9 col-lg-9" > 
 
     </div> 
 
</body>

Nguồn

2016-06-01 06:29:18

Cách đặt thuộc tính phạm vi bằng ng-init?

Trả lời

Các vấn đề liên quan