Angularjs 无法调用Angular指令方法
所以我有一个角度的观点:Angularjs 无法调用Angular指令方法,angularjs,angularjs-directive,Angularjs,Angularjs Directive,所以我有一个角度的观点: <div ng-include="'components/navbar/navbar.html'" class="ui centered grid" id="navbar" onload="setDropdown()"></div> <div class="sixteen wide centered column full-height ui grid" style="margin-top:160px"> <!-- ot
<div ng-include="'components/navbar/navbar.html'" class="ui centered grid" id="navbar" onload="setDropdown()"></div>
<div class="sixteen wide centered column full-height ui grid" style="margin-top:160px">
<!-- other stuff -->
<import-elements></import-elements>
</div>
指令如下所示:
angular.module('pcfApp')
.controller('ImportElementsCtrl', function($scope, $http, $location, $stateParams, $timeout, Framework, OfficialFramework) {
$scope.loadOfficialFrameworks();
// other stuff here
});
angular.module('pcfApp').directive('importElements', function($state, $stateParams, $timeout, $window, Framework, OfficialFramework) {
var link = function(scope, el, attrs) {
scope.loadOfficialFrameworks = function() {
OfficialFramework.query(function(data) {
scope.officialFrameworks = data;
$(".ui.dropdown").dropdown({
onChange: function(value, text, $item) {
loadSections($item.attr("data-id"));
}
});
window.setTimeout(function() {
$(".ui.dropdown").dropdown('set selected', data[0]._id);
}, 0);
});
}
return {
link: link,
replace: true,
templateUrl: "app/importElements/components/import_elements_component.html"
}
});
我的印象是,我可以通过这种方式从我的控制器调用指令的
loadOfficialFrameworks()
方法(因为我没有指定隔离范围),但是我在控制器上得到了一个方法未定义的错误。这里缺少什么?指令范围和控制器范围是两个不同的对象
您应该在CTRL中使用
$scope.$broadcast('loadOfficialFrameworks_事件')代码>
//在指令中
scope.$on('loadOfficialFrameworks_event', function(){
scope.loadOfficialFrameworks();
})
问题是控制器函数在链接函数运行之前运行,因此在尝试调用loadOfficialFrameworks时,loadOfficialFrameworks还不可用
试试这个:
angular.module('pcfApp')
.controller('ImportElementsCtrl', function($scope, $http, $location, $stateParams, $timeout, Framework, OfficialFramework) {
//this will fail because loadOfficialFrameworks doesn't exist yet.
//$scope.loadOfficialFrameworks();
//wait until the directive's link function adds loadOfficialFrameworks to $scope
var disconnectWatch = $scope.$watch('loadOfficialFrameworks', function (loadOfficialFrameworks) {
if (loadOfficialFrameworks !== undefined) {
disconnectWatch();
//execute the function now that we know it has finally been added to scope
$scope.loadOfficialFrameworks();
}
});
});
下面是一个实际操作中的示例:我的理解是,当指令被包含到控制器中时,该指令的方法在控制器的作用域中可用。这把小提琴似乎暗示:这很奇怪,因为当我复制指令joe时,注入的榆树总是第二个?这可能与事物的加载顺序有关。如果我将该方法调用放在$timeout
中,它可以正常工作。我假设控制器在有机会访问指令并将其方法放在控制器的作用域之前尝试执行该方法?在返回JSON中添加restrict:“E”