controllerAs создает переменную 'startPoint' в текущем scope директивы.scope: {} или scope: true} - тогда извне переменная не будет доступна.$scope/$element в контроллере - моветон. Все DOM операции должны происходить в link-функции директивы. Если сложная логика - это всё выносится в сервисы (в которых, собственно, и должна храниться вся бизнес-логика приложения).
// somectrl.js
function SomeCtrl(SomeService) {
var vm = this;
SomeService.getData().then(function (data) {
vm.data = data;
});
}
// someservice.js
function SomeService($http) {
this.getData = function () {
// Если данные всегда одинаковые - можно написать вторым параметром {cache: true}
return $http.get('/data').then(fetchResponse, fetchResponse);
function fetchResponse(response) {
return response.data;
}
};
}<select ng-options="k as v for (k, v) in words">
<option value="">Choose word</option>
</select><html .... data-ng-controller="MainController as ctrl">
<title ng-bind="ctrl.title"></title>angular.module('app', [])
.service('PageTitle', function() {
this.title = 'default';
this.setTitle = function (title) {
this.title = title;
};
this.getTitle = function () {
return this.title;
};
})
.controller('MainCtrl', function(PageTitle) {
PageTitle.setTitle('Foo Bar');
})
.directive('title', function (PageTitle) {
return {
restrict: 'E',
link: link
};
function link($scope, $el) {
$scope.$watch(watchFn, updateFn);
function watchFn() {
return PageTitle.getTitle();
}
function updateFn(title) {
$el.html(title);
}
}
});angular.module('applicaton', [])
.factory('fooBar', function() {
function Service() {
var param = null;
this.setParam = function(param) {
param = param;
};
this.getParam = function() {
return param;
};
}
return function() {
return new Service();
}
})
.directive('sample', function() {
return {
restrict: 'AE',
scope: false,
controller: function(fooBar) {
var service = fooBar();
service.setParam('test');
}
};
});