Javascript 在指令中调用时，Angular JS控制器元素未定义

我有一个这样的控制器：

myApp.controller('WizardController', function ($scope, $http) {

$scope.user = {
    addressline1: null,
    cobuyer: null,
    validate: null,
    cobuyerfirstname: null,
    cobuyerlastname: null,
    cobuyeremail: null,
    cobuyerdob: null,
    cobuyeraddressline1: null,
    cobuyeraddressline2: null,
    cobuyercity: null,
    cobuyerprovince: null,
    cobuyerpostalcode: null,
    cobuyerphone: null,
    dobString: null,
    cobuyerDobString: null,
    isWaitList: false
};

});

我在下面添加此指令：

myApp.directive('checkbox', function () {
    return {
        restrict: 'A',
        replace: false,
        transclude: true,
        scope: {
            user: '='
        },
        template: '<label for="addressSame" class="form-label col-md-2" style="width: auto;">Same as Buyers Address</label><input type="checkbox" name="addressSame" ng-click="isSameAddress()" ng-model="isChecked" />',
        link: function (scope, element, attrs) {
            // Initialize to unchecked
            scope.isChecked = false;

        },
        controller: function ($scope) {

            $scope.isSameAddress = function () {

                console.log($scope.isChecked);

                if ($scope.isChecked == true) {
                    console.log($scope.user);
                }
                else {

                }
            }

        }
    }
});

myApp.directive（'checkbox'，function（）{
返回{
限制：“A”，
替换：false，
是的，
范围：{
用户：'='
},
模板：“与买家地址相同”，
链接：函数（范围、元素、属性）{
//初始化为未选中
scope.isChecked=false；
},
控制器：功能（$scope）{
$scope.isSameAddress=函数（）{
console.log（$scope.isChecked）；
如果（$scope.isChecked==true）{
log（$scope.user）；
}
否则{
}
}
}
}
});

现在，我的复选框显示为它应该显示的样子，我可以检查它并从scope.isChecked中获取true或false。我现在试图从$scope.user获取项目，但它说它未定义。我是Angular JS的新手，我不知道如何解决这个问题……如何获得控制器中定义的元素

我也尝试过这一点，但仍然没有定义：

myApp.directive('checkbox', function () {
    return {
        restrict: 'A',
        replace: false,
        transclude: true,
        scope: {
            user: '='
        },
        template: '<label for="addressSame" class="form-label col-md-2" style="width: auto;">Same as Buyers Address</label><input type="checkbox" name="addressSame" ng-click="isSameAddress()" ng-model="isChecked" />',
        link: function (scope, element, attrs) {
            // Initialize to unchecked
            scope.isChecked = false;

        },
        controller: function ($scope, $http, $rootScope) {

            $scope.isSameAddress = function () {

                console.log($scope.isChecked);

                if ($scope.isChecked == true) {
                    console.log($rootScope.user);
                }
                else {

                }
            }

        }
    }
});

myApp.directive（'checkbox'，function（）{
返回{
限制：“A”，
替换：false，
是的，
范围：{
用户：'='
},
模板：“与买家地址相同”，
链接：函数（范围、元素、属性）{
//初始化为未选中
scope.isChecked=false；
},
控制器：函数（$scope、$http、$rootScope）{
$scope.isSameAddress=函数（）{
console.log（$scope.isChecked）；
如果（$scope.isChecked==true）{
log（$rootScope.user）；
}
否则{
}
}
}
}
});
这是因为
$scope
仅在控制器内部可见；
您可以使用
$rootScope
（请记住它是一个全局变量）；
尝试从
$scope.user
更改为
$rootScope.user
，这是因为
$scope
仅在控制器内部可见；
您可以使用
$rootScope
（请记住它是一个全局变量）；
尝试从
$scope.user
更改为
$rootScope.user
尝试此操作

myApp.controller('WizardController', ['$scope', function ($scope, $http) {

$scope.user = {
    addressline1: null,
    cobuyer: null,
    validate: null,
    cobuyerfirstname: null,
    cobuyerlastname: null,
    cobuyeremail: null,
    cobuyerdob: null,
    cobuyeraddressline1: null,
    cobuyeraddressline2: null,
    cobuyercity: null,
    cobuyerprovince: null,
    cobuyerpostalcode: null,
    cobuyerphone: null,
    dobString: null,
    cobuyerDobString: null,
    isWaitList: false
};

}]);

试试这个

myApp.controller('WizardController', ['$scope', function ($scope, $http) {

$scope.user = {
    addressline1: null,
    cobuyer: null,
    validate: null,
    cobuyerfirstname: null,
    cobuyerlastname: null,
    cobuyeremail: null,
    cobuyerdob: null,
    cobuyeraddressline1: null,
    cobuyeraddressline2: null,
    cobuyercity: null,
    cobuyerprovince: null,
    cobuyerpostalcode: null,
    cobuyerphone: null,
    dobString: null,
    cobuyerDobString: null,
    isWaitList: false
};

}]);


var-app=angular.module（'plunker'，[]）；
应用程序指令（'checkbox'，函数（）{
返回{
限制：“A”，
替换：false，
是的，
$scope:{
用户：'='
},
模板：“与买家地址{{user | json}}相同”，
链接：函数（$scope，element，attrs）{
//初始化为未选中
$scope.isChecked=false；
console.log（$scope.user）
},
控制器：功能（$scope）{
$scope.isSameAddress=函数（）{
console.log（$scope.isChecked）；
如果（$scope.isChecked==true）{
log（$scope.user）；
}
否则{
}
}
}
}
});
app.controller（'MainCtrl'，函数（$scope，$http）{
$scope.user={
addressline1:null，
cobuyer:null，
验证：null，
cobuyerfirstname:null，
cobuyerlastname:null，
cobuyeremail:null，
cobuyerdob:null，
cobuyeraddressline1:null，
cobuyeraddressline2:空，
cobuyercity:null，
cobuyerprovince:null，
cobuyerpostalcode:null，
cobuyerphone:null，
dobString:null，
cobuyerDobString:null，
isWaitList:false
};
});

安古拉斯普朗克
文件。写（“”）；
您好

var-app=angular.module（'plunker'，[]）；
应用程序指令（'checkbox'，函数（）{
返回{
限制：“A”，
替换：false，
是的，
$scope:{
用户：'='
},
模板：“与买家地址{{user | json}}相同”，
链接：函数（$scope，element，attrs）{
//初始化为未选中
$scope.isChecked=false；
console.log（$scope.user）
},
控制器：功能（$scope）{
$scope.isSameAddress=函数（）{
console.log（$scope.isChecked）；
如果（$scope.isChecked==true）{
log（$scope.user）；
}
否则{
}
}
}
}
});
app.controller（'MainCtrl'，函数（$scope，$http）{
$scope.user={
addressline1:null，
cobuyer:null，
验证：null，
cobuyerfirstname:null，
cobuyerlastname:null，
cobuyeremail:null，
cobuyerdob:null，
cobuyeraddressline1:null，
cobuyeraddressline2:空，
cobuyercity:null，
cobuyerprovince:null，
cobuyerpostalcode:null，
cobuyerphone:null，
dobString:null，
cobuyerDobString:null，
isWaitList:false
};
});

安古拉斯普朗克
文件。写（“”）；
您好
由于您没有提供任何其他代码，因此很难确切知道您在做什么。所以我做了一些假设：


我假设您的控制器
向导控制器
是外部控制器
控制器

我想你真的没有使用转换
因为你的模板没有使用它。所以我删除了
transclude:true
从指令中删除
我将代码格式化以适合我的风格。我发现打破我的习惯更容易
来自角度注册码的函数。把事情分组。
如果您打算这样做，我还添加了处理缩小的代码
我从不在指令中嵌入控制器代码。这正合时宜
好一点

我将在下面给出更多细节

这是我的鳕鱼
<div checkbox user="user"></div>

// Directive code for attribute `checkbox`
function checkboxDirective() {
  return {
    controller: 'CheckboxController', // <-- I link to my controller and avoid adding the controller code here.
    restrict: 'A',
    replace: false,
    scope: {
      user: '=checkbox'
    },
    template: '<label for="addressSame" class="form-label col-md-2" style="width: auto;">Same as Buyers Address</label><input type="checkbox" name="addressSame" ng-click="isSameAddress()" ng-model="isChecked" />'
  }
}

<div checkbox="user"></div>