如何使用ng-init設置scope屬性？

我想使用ng-init設置$ scope屬性的值，並且我無法在控制器的javascript中訪問該值。我究竟做錯了什麼？這裏是一個小提琴：http://jsfiddle.net/uce3H/如何使用ng-init設置scope屬性？

標記：

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

在javascrippt，$ scope.testInput是不確定的。不應該是'價值'？

來源

2013-11-14 TimH

您正在嘗試在Angular完成分配之前讀取設置值。

演示：

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

理想情況下，你應該使用$watch通過@Beterraba的建議擺脫定時器：

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

來源

2013-11-14 15:30:14 AlwaysALearner

你problably將要在這種情況下使用'$範圍。$ watch'。 – Beterraba

@Beterraba是的。你是對的。我已經更新了我的答案。謝謝。 – AlwaysALearner

您也可以使用'$ watch'，但請記住，控制器將運行多次，因此無論您是使用超時還是手錶，它都可以運行多次。 –

就像CodeHater說您正在訪問的變量被設置之前。

爲了解決這個問題，將ng-init指令修改爲第一個div。

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

這應該工作！

來源

2013-11-14 15:41:36 eXaminator

您的{{testInput}}超出了控制器的範圍，並且很可能仍然爲null：/考慮將其移動到div – Mutmatt

是的，@Mutmatt這是一個錯字。我直接在這裏編碼，沒有太多的努力。對不起 – 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

來源

2013-11-14 15:46:13 lukpaw

對不起，我的回答（太晚了）我現在看到@Beterraba是第一個。恭喜！ – lukpaw

只需設置NG-初始化爲函數。你不應該使用手錶。

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

下面是一個例子。

Plunker

來源

2013-11-14 15:56:02 Rob

我喜歡這個，迫不及待地嘗試一下。我一直在使用$ watch函數遇到一些問題。 –

超級有用的解決方法！ – kpup

這是最好的建議 –

-1

我遇到了一些麻煩，但$scope.$watch大量的測試後，我發現我的data-ng-model="User.UserName"被嚴重命名後，我把它改成data-ng-model="UserName"一切正常。我認爲它是導致問題的名稱中的.。

來源

2016-05-19 13:08:44 ewil

試試這個代碼

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>

來源

2016-06-01 06:29:18

如何使用ng-init設置scope屬性？

回答

相關問題