angular con dinosaurios 4

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Angular con dinosaurios</title>
</head>

<body>
  <section ng-app="miAplicacion">
    <mi-directiva></mi-directiva>

    <div ng-controller="miControlador">

      <!-- Aquí estamos pasando cadenas -->
      <b>@, con valores definidos en el controlador:</b> 
      <directiva-scope1 dinosaurio="{{dinosaurio}}" alimento="{{alimento}}"></directiva-scope1>

      <b> @, con valores definidos en la directiva:</b>
      <directiva-scope1 dinosaurio="estegosaurio" alimento="avellanas"></directiva-scope1>

      <b> dinosaurio y alimento siguen teniendo el valor definido en el scope, y no
    el que acaban de tener el scope aislado de la directiva </b>
      <p>Al {{dinosaurio }} le gusta comer {{ alimento }}</p>

      <!-- Aquí en cambio, le pasamos las propiedades del objeto otroDinosaurio -->
      <b> =, con propiedades definidas en el controlador</b>
      <directiva-scope2 dinosaurio="otroDinosaurio.nombre" alimento="otroDinosaurio.alimento"></directiva-scope2>

      <b> =, con propiedades definidas en la directiva</b>
      <directiva-scope2 dinosaurio="otroDinosaurio.nombre='cambiado'" alimento="otroDinosaurio.alimento"></directiva-scope2>

      <b> El cambio afecta al controlador</b>
     <p> Al {{otroDinosaurio.nombre }} le gusta comer {{otroDinosaurio.alimento}}</p>

   </div>
  </section>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
  <script src="app.js"></script>
  <script src="controllers.js"></script>
</body>

</html>

http://www.mmfilesi.com/?p=2638

var miModulo = angular.module('miAplicacion', []);

miModulo.directive('miDirectiva', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<p> Al velocirraptor le gustan los helados </p>  '
  }
});

miModulo.directive('directivaScope1', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      dinosaurio: '@',
      alimento: '@'
    },
    template: '<p> Al {{dinosaurio}} le gusta comer {{alimento}} </p>  '
  }
});

miModulo.directive('directivaScope2', function() {

  return {
    restrict: 'E',
    replace: true,
    scope: {
      dinosaurio: '=',
      alimento: '='
    },
    template: '<p> Al {{dinosaurio}} le gusta comer {{alimento}} </p>  '
  }
});

miModulo.controller("miControlador", function($scope) {
    $scope.dinosaurio = "tiranosaurio";
    $scope.alimento = "picos";
    
    $scope.otroDinosaurio = { nombre : "Iguanodon", alimento : 'ciruelas' };

    $scope.funcionDinosaurioNombre = function(nombreDinosaurio) {
      $scope.otroDinosaurioMasNombre = nombreDinosaurio;
    };
  
});