我有一个Angular观点:
<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>
这是由UI-Router控制的,它正在分配控制器,只是FYI。
此视图的控制器如下所示:
angular.module('pcfApp')
.controller('ImportElementsCtrl', function($scope, $http, $location, $stateParams, $timeout, Framework, OfficialFramework) {
$scope.loadOfficialFrameworks();
// other stuff here
});
<import-elements>
指令,如下所示:
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()
方法(因为我没有指定隔离范围),但是我在控制器上遇到方法未定义错误。我在这里缺少什么?
答案 0 :(得分:2)
问题是您的控制器功能在链接功能运行之前运行,因此当您尝试调用它时,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();
}
});
});
这里有一个小例子:http://jsfiddle.net/81bcofgy/
答案 1 :(得分:0)
指令范围和控制器范围是两个不同的对象
你应该在CTRL中使用
$scope.$broadcast('loadOfficialFrameworks_event');
//并在指令
中scope.$on('loadOfficialFrameworks_event', function(){
scope.loadOfficialFrameworks();
})