gpt4 book ai didi

javascript - 无法以 Angular 形式访问 $scope

转载 作者:行者123 更新时间:2023-12-03 06:21:07 24 4
gpt4 key购买 nike

请找到我的 Controller 文件..

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

选择hobbies.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>

最佳答案

由于您要求外部文件,您可以像这样更改您的函数:

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

在你的 Controller 中:

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

然后在你的 Controller 中:

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

关于javascript - 无法以 Angular 形式访问 $scope,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38870937/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com