Wie setze ich die Eigenschaft scope mit ng-init?

Ich versuche, den Wert einer $ Scope-Eigenschaft mithilfe von ng-init festzulegen, und ich kann nicht auf diesen Wert im JavaScript des Controllers zugreifen. Was mache ich falsch? Hier ist eine Geige: http://jsfiddle.net/uce3H/Wie setze ich die Eigenschaft scope mit ng-init?

Markup:

<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); 
}

Im javascrippt, $ scope.testInput ist nicht definiert. Sollte nicht "Wert" sein?

Quelle

2013-11-14 TimH

Sie versuchen, den eingestellten Wert zu lesen, bevor Angular zugewiesen wird.

Demo:

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

Idealerweise sollten Sie $watch verwenden, wie von @Beterraba vorgeschlagen des Timers, um loszuwerden:

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

Quelle

2013-11-14 15:30:14 AlwaysALearner

Sie Umfang problably wollen verwenden '$. $ Watch' in diesem Fall. – Beterraba

@Beterraba Ja. Du hast recht. Ich habe meine Antwort aktualisiert. Vielen Dank. – AlwaysALearner

Sie könnten auch eine '$ watch' verwenden, aber bedenken Sie, dass der Controller mehrere Male ausgeführt wird. Ob Sie also ein Timeout oder eine Uhr verwenden, kann mehrmals ausgeführt werden. –

Wie CodeHater sagte die Variable zugreifen, bevor sie eingestellt ist.

Um dies zu beheben, verschieben Sie die ng-init-Direktive zum ersten div.

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

Das sollte funktionieren!

Quelle

2013-11-14 15:41:36 eXaminator

Ihr {{testInput}} liegt außerhalb des Bereichs des Controllers und wird höchstwahrscheinlich immer noch null sein:/ziehen Sie es in den div – Mutmatt

Yep, @Mutmatt ist es ein Tippfehler. Ich habe es direkt hier codiert, ohne viel zu lernen. Sorry – 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

Quelle

2013-11-14 15:46:13 lukpaw

Sorry für meine Antwort (zu spät) Ich sehe jetzt, dass @Beterraba zuerst war. Glückwunsch! – lukpaw

Gerade gesetzt ng-init als Funktion. Sie sollten nicht watch verwenden müssen.

<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; 
    } 
}]);

Hier ist ein Beispiel.

Plunker

Quelle

2013-11-14 15:56:02 Rob

Ich mag das, kann es kaum erwarten, es auszuprobieren. Ich habe einige Probleme mit der $ Watch-Funktion festgestellt. –

Super hilfreicher Workaround! – kpup

Dies ist der beste Vorschlag –

-1

hatte ich einige Probleme mit $scope.$watch aber nach einer Menge Tests fand ich heraus, dass meine data-ng-model="User.UserName" schlecht benannt wurde und nachdem ich es data-ng-model="UserName" alles funktionierte gut verändert. Ich erwarte, dass es das . in dem Namen ist, der das Problem verursacht.

Quelle

2016-05-19 13:08:44 ewil

diesem Code Versuchen

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>

Quelle

2016-06-01 06:29:18

Wie setze ich die Eigenschaft scope mit ng-init?

Antwort

Verwandte Themen