Я знаю, что здесь есть миллиард вопросов об изоляции, но я не мог найти тот, который напрямую связан с этой точной проблемой.Получение модели контроллера из директивы об ограничении выделения

У меня есть свойство на моем контроллере Model, поэтому .. $scope.Model. Затем у меня есть директива, которая должна взаимодействовать с Моделью.

Я хочу дать директиве изоляционную область, но это немного сложно, потому что это означает, что у меня больше нет доступа к модели. Я думал, что смогу это решить, указав модель как двустороннюю привязку в области выделения, как это.

HTML

<body ng-app="app" ng-controller="HomeController"> 
    <div custom-directive="Model.Tags"></div> 
</body>

Javascript

app.directive('customDirective', ['$parse', function($parse) { 
    return { 
     restrict: "A", 
     scope: { 
     customDirective: "=Model" 
     }, 
     link: function(scope, element, attributes){ 
     // need to access the controller's "$scope.Model" here for some things. 
     var model = scope.$eval(attributes.customDirective); 
     } 
    } 
}]) 
.controller('HomeController', ['$scope', function($scope) { 
    $scope.Model = { 
     Id: "items/1", 
     Name: "Some Model Object", 
     Tags: [] 
    }; 
}]);

я действительно потерял, почему это не работает. Согласно всем учебным пособиям по изоляту, которые я видел, это должно быть хорошо.

заметки

Попутный контроллер в качестве параметра не вариант. Третья библиотека, с которой мне нужно взаимодействовать, уже делает это, и, по-видимому, я не могу сделать это дважды в одном и том же элементе HTML.

источник

2014-09-09 Ciel

Ваше неправильное использование. Это будет работать:

<body ng-app="app" ng-controller="HomeController"> 
    <div custom-directive="Model"></div> 
</body> 


app.directive('customDirective', [function() { 
    return { 
     restrict: "A", 
     scope: { 
     customDirective: "=" 
     }, 
     link: function(scope, element, attributes){ 
      console.log(scope.customDirective); // this is the $scope.Model due to 2-way binding 
     } 
    } 
}]) 
.controller('HomeController', ['$scope', function($scope) { 
    $scope.Model = { 
     Id: "items/1", 
     Name: "Some Model Object", 
     Tags: [] 
    }; 
}]);

источник

2014-09-09 17:46:43

О bazing! Это сработало. Что я делал неправильно? – Ciel

Пара вещей. 1. Как вы хотите $ scope.Model, а не $ scope.Model.Tags, поэтому атрибут в HTML должен быть установлен в $ scope.Model. Если вы хотите только теги, вы можете сохранить оригинальное объявление. 2. Часть после '=' должна совпадать с именем атрибута, в этом случае она должна быть 'customDirective', а не' Model'; но вы можете пропустить его, если это одноименное имя с желаемым именем модели в изолированной области, поэтому в этом случае требуется только '='. Наконец, вы можете получить доступ к модели в изолированной области с помощью стандартного синтаксиса доступа к свойствам. –

О, нет. Я хотел «Model.Tags». Он должен был взаимодействовать с этим конкретным свойством. Но чтобы зайти так далеко, мне пришлось получить доступ к модели. – Ciel

фактически под сферу, имя свойства соответствует изолята области видимости имущества директивы в вашем случае это customDirective. SO ваш код должен быть: -

var app=angular.module("app",[]); 
app.directive('customDirective', ['$parse', function($parse) { 
return { 
    restrict: "A", 
    scope: { 
    customDirective: "=model" 
    }, 
    link: function(scope, element, attributes){ 
    // need to access the controller's "$scope.Model" here for some things. 
     console.log(scope.customDirective); 
    } 
} 
}]); 
app.controller('HomeController', ['$scope', function($scope) { 
$scope.Model = { 
    Id: "items/1", 
    Name: "Some Model Object", 
    Tags: [] 
}; 
}]);

http://jsfiddle.net/4bb4dozv/

источник

2014-09-09 17:48:38 Akhlesh

Не понимаю. Это похоже на мой код, за исключением того, что вы использовали 'model' вместо' Model'. Что заставляет его работать так внезапно? – Ciel

О, я вижу. Доступ к нему через 'scope.customDirective' вместо' attributes'. – Ciel

Получение модели контроллера из директивы об ограничении выделения

HTML

Javascript

ответ

Смежные вопросы