无法以正式形式访问$ scope
[英]unable to access $scope in angular formly
问题描述
请找到我的控制器文件。
(function () {
var app = angular.module('myApp',['formly','formlyBootstrap'])
app.run(function(formlyConfig) {
formlyConfig.setType({
name: 'custom',
templateUrl: 'custom.html'
});
});
app.factory('jsonService', function jsonService($http){
return {
getJSON: getJSON
};
function getJSON(abc) {
console.log("Inside" + abc);
return $http.get('readJson.php?abc='+abc);
}
});
app.controller('MyController', function ($scope) {
$scope.user = {};
$scope.fillSecDropDown = [];
$scope.userFields = [{
"key": "hobbies",
"type": "select",
"templateOptions": {
"label": "Hobbies",
"options":[{id:'A',title:'A'},{id:'B',title:'B'}],
"valueProp": "id",
"labelProp":"title",
onChange: function (abc) {
selectHobbies(abc);
}
}
}]
})
})();
selecthobbies.js文件。
function selectHobbies(abc)
{
console.log("here " + abc);
$scope.fillDropDown = [ // getting error here //
{
key: 'custom',
type: 'custom',
templateOptions:{
options: [],
valueProp: 'id',
labelProp: 'title'
},
controller:function($scope) {
console.log("here");
});
}
}
];
}
我无法在我的selecthobbies.js文件中访问$ scope。 有什么办法可以调用不在同一文件中的onChange函数？
我收到错误$ scope未定义..
index.html文件
<html>
<head>
<script src="api-check.js"></script>
<script src="angular.js"></script>
<script src="formly.js"></script>
<script src="jquery.min.js"></script>
<script src="angular-formly-templates-bootstrap.js"></script>
<script src="mycontroller.js"></script>
<script src="selecthobbies.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
</head>
<body ng-app="myApp" ng-controller="MyController">
<formly-form model="user" fields="userFields"></formly-form>
<formly-form model="fillSecDropDown" fields="fillDropDown"></formly-form>
</body>
</html>
2 个解决方案
解决方案1
1 2016-08-10 10:42:40
由于您需要外部文件，因此可以像下面这样更改功能：
function selectHobbies(scope, abc)
{
console.log("here " + abc);
scope.fillDropDown = [ // getting error here //
{
key: 'custom',
type: 'custom',
templateOptions:{
options: [],
valueProp: 'id',
labelProp: 'title'
},
controller:function($scope) {
console.log("here");
});
}
}
];
return scope;
}
并在您的控制器中：
app.controller('MyController', function ($scope) {
$scope.user = {};
$scope.fillSecDropDown = [];
$scope.userFields = [{
"key": "hobbies",
"type": "select",
"templateOptions": {
"label": "Hobbies",
"options":[{id:'A',title:'A'},{id:'B',title:'B'}],
"valueProp": "id",
"labelProp":"title",
onChange: function (abc) {
$scope = selectHobbies($scope, abc);
}
}
}]
})
但这一点都不漂亮，只要可以就不要这样做。 如果需要此功能，则说明您的功能存在问题，请以更好的方式对其进行重构。
编辑->您可以通过一种更好的方式使用服务来做到这一点：
(function() {
'use strict';
angular
.module('yourApp')
.factory('yourService', yourServiceFactory);
function yourServiceFactory() {
var service = {
get: get
}
return service;
function get(abc) {
return {
key: 'custom',
type: 'custom',
templateOptions:{
options: [],
valueProp: 'id',
labelProp: 'title'
},
controller:function($scope) {
console.log("here");
});
}
}
}
})();
然后在您的控制器中：
app.controller('MyController', function ($scope, yourService) {
$scope.user = {};
$scope.fillSecDropDown = [];
$scope.userFields = [{
"key": "hobbies",
"type": "select",
"templateOptions": {
"label": "Hobbies",
"options":[{id:'A',title:'A'},{id:'B',title:'B'}],
"valueProp": "id",
"labelProp":"title",
onChange: function (abc) {
$scope.fillSecDropDown.push(yourService.get(abc));
}
}
}]
})
解决方案2
0 2016-08-10 10:39:40
移动您的selecthobbies.js文件。 到您的控制器，将是这样的：
(function () {
var app = angular.module('myApp',['formly','formlyBootstrap'])
app.run(function(formlyConfig) {
formlyConfig.setType({
name: 'custom',
templateUrl: 'custom.html'
});
});
app.factory('jsonService', function jsonService($http){
return {
getJSON: getJSON
};
function getJSON(abc) {
console.log("Inside" + abc);
return $http.get('readJson.php?abc='+abc);
}
});
app.controller('MyController', function ($scope) {
$scope.user = {};
$scope.fillSecDropDown = [];
$scope.userFields = [{
"key": "hobbies",
"type": "select",
"templateOptions": {
"label": "Hobbies",
"options":[{id:'A',title:'A'},{id:'B',title:'B'}],
"valueProp": "id",
"labelProp":"title",
onChange: function (abc) {
selectHobbies(abc);
}
}
}];
$scope.selectHobbies = function(abc){
console.log("here " + abc);
$scope.fillDropDown = [ // getting error here //
{
key: 'custom',
type: 'custom',
templateOptions:{
options: [],
valueProp: 'id',
labelProp: 'title'
},
controller:function($scope) {
console.log("here");
});
}
}
];
}
})
})();
无法从dom访问角度范围
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.