angularjs rootscope и изолированная сфера

Question

Ниже мой HTML и Javascript

<div ng-app="myApp" ng-controller="myCtrl"> 
    {{firstname}} 
    <sample-directive></sample-directive> 
</div> 

JS

var app = angular.module("myApp", []); 
app.run(function($rootScope){ 
    $rootScope.firstname = "Root scope value" 
}); 
app.controller("myCtrl", function($scope) { 

}); 

app.directive("sampleDirective",function(){ 
    return{ 
    template:"<div>{{firstname}}</div>", 
    controller:['$scope',sampleDirectiveScope] 
    }; 
}); 

function sampleDirectiveScope($scope){ 
    $scope.firstname = "scope value"; 
}; 

Я ожидаю "Root значения области" будет показана в выражении и «значение Scope " для отображения внутри метки директивы

Почему они оба отображают Значение области?

Не должно ли выражение {{firstname}} получить значение от корнеплодов, так как я изменил имя только внутри контроллера директивы?

FIDDLE

Answer 1

Разделение сферы поведение по умолчанию Угловая Директивам. Для очень подробной и полной проверки ответов на это сообщение: https://stackoverflow.com/a/19775531/3686898

Вот ваш обновленный скрипку с новой областью:

app.directive("sampleDirective",function(){ 
    return{ 
    template:"<div>{{firstname}}</div>", 
    scope: {}, 
    controller:['$scope',sampleDirectiveScope] 
    }; 
}); 

https://jsfiddle.net/a1gf9fwc/2/

Answer 2

The $scope директивы по умолчанию указывает на объем того, что над ним. Используйте свойство scope для его настройки.

var app = angular.module("myApp", []); 
app.run(function ($rootScope) { 
    $rootScope.firstname = "Root scope" 
}); 
app.controller("myCtrl", function ($scope) { 
    $scope.lastName = "Doe"; 
}); 

app.directive("sampleDirective", function() { 
    return { 
     template: "<div>{{firstname}}</div>", 
     scope: {}, // isolated scope 
     controller: ['$scope', sampleDirectiveScope] 
    }; 
}); 

Использование scope: {} обеспечивает изолированный объем, отделенный от указанной выше области. Внутри {} вы можете предоставить список свойств, которые хотите явно передать. Другие возможные значения для области: false (значение по умолчанию, точка для области выше) и true (укажите на область с помощью прототипирования).

Подробнее здесь: https://docs.angularjs.org/guide/directive (прокрутите немного вниз, или искать «изолировать сферу»)

Answer 3

использования scope: {} в вашей директиве